@planningcenter/tapestry 3.2.0-rc.4 → 3.2.1-rc.0

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 (36) hide show
  1. package/dist/components/page-header/index.js +1 -1
  2. package/dist/components/sidenav/index.js +1 -1
  3. package/dist/reactRender.css +634 -630
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +634 -630
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/tapestry-wc/dist/components/{p-Dj-IUu_k.js → p-Bc3D1UhE.js} +3 -3
  8. package/dist/tapestry-wc/dist/components/p-Bc3D1UhE.js.map +1 -0
  9. package/dist/tapestry-wc/dist/components/{p-0CKhI_UD.js → p-CNhTorvM.js} +3 -3
  10. package/dist/tapestry-wc/dist/components/p-CNhTorvM.js.map +1 -0
  11. package/dist/tapestry-wc/dist/components/{p-BKKejKke.js → p-D8qDXp6N.js} +2 -2
  12. package/dist/tapestry-wc/dist/components/p-D8qDXp6N.js.map +1 -0
  13. package/dist/tapestry-wc/dist/components/{p-CGFTpled.js → p-DT6EbtzB.js} +2 -2
  14. package/dist/tapestry-wc/dist/components/p-DT6EbtzB.js.map +1 -0
  15. package/dist/tapestry-wc/dist/components/{p-dJwCwh2Q.js → p-asSY9hZ8.js} +3 -3
  16. package/dist/tapestry-wc/dist/components/p-asSY9hZ8.js.map +1 -0
  17. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  18. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  19. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  20. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  21. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  22. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  23. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  24. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  25. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  26. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  27. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  28. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  29. package/dist/unstable.css +19 -15
  30. package/dist/unstable.css.map +1 -1
  31. package/package.json +5 -5
  32. package/dist/tapestry-wc/dist/components/p-0CKhI_UD.js.map +0 -1
  33. package/dist/tapestry-wc/dist/components/p-BKKejKke.js.map +0 -1
  34. package/dist/tapestry-wc/dist/components/p-CGFTpled.js.map +0 -1
  35. package/dist/tapestry-wc/dist/components/p-Dj-IUu_k.js.map +0 -1
  36. package/dist/tapestry-wc/dist/components/p-dJwCwh2Q.js.map +0 -1
@@ -360,223 +360,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
360
360
  flex-direction:column;
361
361
  }
362
362
 
363
- .tds-checkbox{
364
- --tds-checkbox-font-size:var(--t-font-size-md);
365
- --tds-checkbox-cursor:pointer;
366
- --tds-checkbox-line-height:1.4;
367
- --tds-checkbox-transition-property:background-color, border-color;
368
-
369
- --tds-checkbox-input-size:var(--t-element-size-md);
370
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
371
- --tds-checkbox-input-border-color:var(--t-form-border-color);
372
- --tds-checkbox-input-background-color:transparent;
373
-
374
- --tds-checkbox-input-icon:none;
375
- --tds-checkbox-input-icon-visibility:hidden;
376
- --tds-checkbox-input-icon-opacity:0;
377
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
378
-
379
- --tds-checkbox-label-color:var(--t-form-color);
380
-
381
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
382
- --tds-checkbox-description-line-height:1.35;
383
- --tds-checkbox-description-color:var(--t-text-color-secondary);
384
- --tds-checkbox-description-invalid-icon-display:none;
385
-
386
- position:relative;
387
- display:inline-grid;
388
- grid-template-columns:auto;
389
- grid-auto-columns:1fr;
390
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
391
- line-height:var(--tds-checkbox-line-height);
392
- cursor:var(--tds-checkbox-cursor);
393
- -webkit-user-select:none;
394
- -moz-user-select:none;
395
- user-select:none;
396
- }
397
-
398
- .tds-checkbox label{
399
- grid-area:1 / 2;
400
- font-size:var(--tds-checkbox-font-size);
401
- font-weight:var(--t-font-weight-normal);
402
- color:var(--tds-checkbox-label-color);
403
- cursor:var(--tds-checkbox-cursor);
404
- }
405
-
406
- .tds-checkbox tds-indeterminate{
407
- display:flex;
408
- }
409
-
410
- .tds-checkbox input[type="checkbox"]{
411
- position:relative;
412
- width:1em;
413
- height:1em;
414
- margin:calc((1lh - 1em) / 2) 0 0;
415
- font-size:var(--tds-checkbox-font-size);
416
- line-height:inherit;
417
- -webkit-appearance:none;
418
- -moz-appearance:none;
419
- appearance:none;
420
- cursor:var(--tds-checkbox-cursor);
421
- background-color:var(--tds-checkbox-input-background-color);
422
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
423
- border-radius:var(--tds-checkbox-input-border-radius);
424
- transition-timing-function:var(--t-ease-in-out);
425
- transition-duration:var(--t-duration-200);
426
- transition-property:var(--tds-checkbox-transition-property);
427
- }
428
-
429
- :is(.tds-checkbox input[type="checkbox"])::before{
430
- position:absolute;
431
- top:50%;
432
- left:50%;
433
- visibility:var(--tds-checkbox-input-icon-visibility);
434
- width:100%;
435
- height:100%;
436
- content:"";
437
- background-color:var(--tds-checkbox-input-icon-fill);
438
- border-radius:var(--tds-checkbox-input-border-radius);
439
- opacity:var(--tds-checkbox-input-icon-opacity);
440
- -webkit-mask-image:var(--tds-checkbox-input-icon);
441
- mask-image:var(--tds-checkbox-input-icon);
442
- -webkit-mask-repeat:no-repeat;
443
- mask-repeat:no-repeat;
444
- -webkit-mask-size:contain;
445
- mask-size:contain;
446
- transform:translate(-50%, -50%);
447
- }
448
-
449
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
450
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
451
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
452
- }
453
-
454
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
455
- outline:var(--t-focus-ring-outline);
456
- outline-offset:var(--t-focus-ring-offset);
457
- }
458
-
459
- :is(.tds-checkbox input[type="checkbox"]):disabled{
460
- pointer-events:none;
461
- }
462
-
463
- @media (prefers-reduced-motion: reduce){
464
-
465
- .tds-checkbox input[type="checkbox"]{
466
- --tds-checkbox-transition-property:none;
467
- }
468
- }
469
-
470
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
471
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
472
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
473
- --tds-checkbox-input-icon-visibility:visible;
474
- --tds-checkbox-input-icon-opacity:1;
475
- }
476
-
477
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
478
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
479
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
480
- }
481
-
482
- .tds-checkbox:has(input:checked){
483
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
484
- }
485
-
486
- .tds-checkbox:has(input:indeterminate){
487
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
488
- }
489
-
490
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
491
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
492
- --tds-checkbox-description-color:var(--t-text-color-status-error);
493
- --tds-checkbox-description-invalid-icon-display:inline-block;
494
- }
495
-
496
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
497
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
498
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
499
- }
500
-
501
- :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{
502
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
503
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
504
- }
505
-
506
- :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){
507
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
508
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
509
- }
510
-
511
- .tds-checkbox:has(input:required) label::after{
512
- margin-left:.25ch;
513
- color:var(--t-text-color-status-error);
514
- content:"*";
515
- }
516
-
517
- .tds-checkbox:has(input:disabled){
518
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
519
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
520
-
521
- --tds-checkbox-label-color:var(--t-form-color-disabled);
522
- --tds-checkbox-description-color:var(--t-form-color-disabled);
523
- --tds-checkbox-cursor:not-allowed;
524
- }
525
-
526
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
527
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
528
- }
529
-
530
- .tds-checkbox-description{
531
- display:flex;
532
- grid-area:2 / 2;
533
- gap:var(--t-spacing-half);
534
- align-items:flex-start;
535
- margin:0;
536
- font-size:var(--tds-checkbox-description-font-size);
537
- line-height:var(--tds-checkbox-description-line-height);
538
- color:var(--tds-checkbox-description-color);
539
- cursor:text;
540
- }
541
-
542
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
543
- display:var(--tds-checkbox-description-invalid-icon-display);
544
- flex-shrink:0;
545
- margin-top:calc(.5lh - .5em);
546
- line-height:var(--tds-checkbox-description-line-height);
547
- }
548
-
549
- .tds-checkbox--sm{
550
- --tds-checkbox-line-height:1.35;
551
- --tds-checkbox-input-size:var(--t-element-size-sm);
552
- --tds-checkbox-font-size:var(--t-font-size-sm);
553
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
554
- --tds-checkbox-description-line-height:1.3;
555
- }
556
-
557
-
558
- :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{
559
- -webkit-appearance:none;
560
- appearance:none;
561
- }
562
-
563
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
564
- inline-size:1em;
565
- block-size:2em;
566
- }
567
-
568
- @supports (field-sizing: content){
569
- .tds-input--auto-width{
570
- inline-size:-moz-fit-content;
571
- inline-size:fit-content;
572
- }
573
-
574
- .tds-input--auto-width input{
575
- field-sizing:content;
576
- inline-size:auto;
577
- }
578
- }
579
-
580
363
  @layer t-critical{
581
364
  tds-page-header:not(.hydrated){
582
365
  display:none;
@@ -972,337 +755,221 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
972
755
  --tds-radio-description-line-height:1.3;
973
756
  }
974
757
 
975
- .tds-radio-group{
976
- --tds-radio-group-font-size:var(--t-font-size-md);
977
- --tds-radio-group-line-height:1.4;
978
- --tds-radio-group-gap:var(--t-spacing-1);
979
-
980
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
981
758
 
982
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
983
- --tds-radio-group-description-line-height:1.35;
984
- --tds-radio-group-description-color:var(--t-text-color-secondary);
985
- --tds-radio-group-description-invalid-icon-display:none;
986
- display:flex;
987
- flex-direction:column;
988
- gap:var(--tds-radio-group-gap);
989
- padding:0;
990
- margin:0;
759
+ :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{
760
+ -webkit-appearance:none;
761
+ appearance:none;
762
+ }
991
763
 
992
- font-size:var(--tds-radio-group-font-size);
993
- line-height:var(--tds-radio-group-line-height);
994
- border:0;
995
- }
764
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
765
+ inline-size:1em;
766
+ block-size:2em;
767
+ }
996
768
 
997
- .tds-radio-group legend{
998
- padding:0;
999
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
769
+ @supports (field-sizing: content){
770
+ .tds-input--auto-width{
771
+ inline-size:-moz-fit-content;
772
+ inline-size:fit-content;
1000
773
  }
1001
774
 
1002
- .tds-radio-group:has(.tds-radio-group-description){
1003
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1004
- }
1005
-
1006
- .tds-radio-group[aria-invalid="true"]{
1007
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1008
- --tds-radio-group-description-invalid-icon-display:inline-block;
775
+ .tds-input--auto-width input{
776
+ field-sizing:content;
777
+ inline-size:auto;
1009
778
  }
779
+ }
1010
780
 
1011
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1012
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1013
- }
781
+ .tds-checkbox{
782
+ --tds-checkbox-font-size:var(--t-font-size-md);
783
+ --tds-checkbox-cursor:pointer;
784
+ --tds-checkbox-line-height:1.4;
785
+ --tds-checkbox-transition-property:background-color, border-color;
1014
786
 
1015
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1016
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1017
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1018
- }
787
+ --tds-checkbox-input-size:var(--t-element-size-md);
788
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
789
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
790
+ --tds-checkbox-input-background-color:transparent;
1019
791
 
1020
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1021
- --tds-radio-input-background-color:var(--t-form-background-color);
1022
- }
792
+ --tds-checkbox-input-icon:none;
793
+ --tds-checkbox-input-icon-visibility:hidden;
794
+ --tds-checkbox-input-icon-opacity:0;
795
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1023
796
 
1024
- .tds-radio-group:has(input:required) legend::after{
1025
- margin-left:.25ch;
1026
- color:var(--t-text-color-status-error);
1027
- content:"*";
1028
- }
797
+ --tds-checkbox-label-color:var(--t-form-color);
1029
798
 
1030
- .tds-radio-group-fields{
1031
- display:flex;
1032
- flex-direction:column;
1033
- gap:var(--tds-radio-group-gap);
1034
- align-items:flex-start;
1035
- }
799
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
800
+ --tds-checkbox-description-line-height:1.35;
801
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
802
+ --tds-checkbox-description-invalid-icon-display:none;
1036
803
 
1037
- .tds-radio-group-description{
1038
- display:flex;
1039
- gap:var(--t-spacing-half);
1040
- align-items:flex-start;
1041
- margin:0;
1042
- font-size:var(--tds-radio-group-description-font-size);
1043
- line-height:var(--tds-radio-group-description-line-height);
1044
- color:var(--tds-radio-group-description-color);
1045
- cursor:text;
804
+ position:relative;
805
+ display:inline-grid;
806
+ grid-template-columns:auto;
807
+ grid-auto-columns:1fr;
808
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
809
+ line-height:var(--tds-checkbox-line-height);
810
+ cursor:var(--tds-checkbox-cursor);
811
+ -webkit-user-select:none;
812
+ -moz-user-select:none;
813
+ user-select:none;
1046
814
  }
1047
815
 
1048
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1049
- display:var(--tds-radio-group-description-invalid-icon-display);
1050
- flex-shrink:0;
1051
- margin-top:calc(.5lh - .5em);
1052
- line-height:var(--tds-radio-group-description-line-height);
816
+ .tds-checkbox label{
817
+ grid-area:1 / 2;
818
+ font-size:var(--tds-checkbox-font-size);
819
+ font-weight:var(--t-font-weight-normal);
820
+ color:var(--tds-checkbox-label-color);
821
+ cursor:var(--tds-checkbox-cursor);
1053
822
  }
1054
823
 
1055
- .tds-radio-group--sm{
1056
- --tds-radio-group-line-height:1.35;
1057
- --tds-radio-group-font-size:var(--t-font-size-sm);
1058
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1059
- --tds-radio-group-description-line-height:1.3;
1060
- }
1061
-
1062
- .tds-input:has(textarea){
1063
- --tds-input-padding-block:6px;
1064
- --tds-input-resizer-size:var(--t-element-size-sm);
1065
- --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");
1066
- }
1067
-
1068
- @supports (x: attr(x type(*))){
824
+ .tds-checkbox tds-indeterminate{
825
+ display:flex;
826
+ }
1069
827
 
1070
- .tds-input:has(textarea){
1071
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1072
- }
828
+ .tds-checkbox input[type="checkbox"]{
829
+ position:relative;
830
+ width:1em;
831
+ height:1em;
832
+ margin:calc((1lh - 1em) / 2) 0 0;
833
+ font-size:var(--tds-checkbox-font-size);
834
+ line-height:inherit;
835
+ -webkit-appearance:none;
836
+ -moz-appearance:none;
837
+ appearance:none;
838
+ cursor:var(--tds-checkbox-cursor);
839
+ background-color:var(--tds-checkbox-input-background-color);
840
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
841
+ border-radius:var(--tds-checkbox-input-border-radius);
842
+ transition-timing-function:var(--t-ease-in-out);
843
+ transition-duration:var(--t-duration-200);
844
+ transition-property:var(--tds-checkbox-transition-property);
1073
845
  }
1074
846
 
1075
- .tds-input.tds-textarea--resize-vertical textarea{
1076
- resize:vertical;
847
+ :is(.tds-checkbox input[type="checkbox"])::before{
848
+ position:absolute;
849
+ top:50%;
850
+ left:50%;
851
+ visibility:var(--tds-checkbox-input-icon-visibility);
852
+ width:100%;
853
+ height:100%;
854
+ content:"";
855
+ background-color:var(--tds-checkbox-input-icon-fill);
856
+ border-radius:var(--tds-checkbox-input-border-radius);
857
+ opacity:var(--tds-checkbox-input-icon-opacity);
858
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
859
+ mask-image:var(--tds-checkbox-input-icon);
860
+ -webkit-mask-repeat:no-repeat;
861
+ mask-repeat:no-repeat;
862
+ -webkit-mask-size:contain;
863
+ mask-size:contain;
864
+ transform:translate(-50%, -50%);
1077
865
  }
1078
866
 
1079
- .tds-input.tds-textarea--resize-none textarea{
1080
- resize:none;
867
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
868
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
869
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1081
870
  }
1082
871
 
1083
- .tds-input.tds-textarea--resize-auto textarea{
1084
- resize:vertical;
872
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
873
+ outline:var(--t-focus-ring-outline);
874
+ outline-offset:var(--t-focus-ring-offset);
1085
875
  }
1086
876
 
1087
- @supports (field-sizing: content){
1088
- .tds-input.tds-textarea--resize-auto textarea{
1089
- field-sizing:content;
1090
- resize:none;
1091
- }
877
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
878
+ pointer-events:none;
1092
879
  }
1093
880
 
1094
- .tds-input textarea{
1095
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1096
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1097
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1098
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1099
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1100
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1101
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1102
- --tds-input-scrollbar-thumb-border-radius:999px;
1103
- --tds-input-scrollbar-thumb-border-width:3px;
1104
- --tds-input-scrollbar-track-margin-block:.125rem;
1105
- scrollbar-color:initial;
1106
- transition-timing-function:var(--t-ease-in-out);
1107
- transition-duration:var(--t-duration-200);
1108
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1109
- }
881
+ @media (prefers-reduced-motion: reduce){
1110
882
 
1111
- @media (pointer: fine){
1112
- :is(.tds-input textarea)::-webkit-scrollbar{
1113
- width:12px;
1114
- height:12px;
1115
- cursor:default;
883
+ .tds-checkbox input[type="checkbox"]{
884
+ --tds-checkbox-transition-property:none;
885
+ }
1116
886
  }
1117
887
 
1118
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1119
- cursor:default;
1120
- background:var(--tds-input-scrollbar-thumb-color);
1121
- background-clip:content-box;
1122
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1123
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1124
- }
888
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
889
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
890
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
891
+ --tds-checkbox-input-icon-visibility:visible;
892
+ --tds-checkbox-input-icon-opacity:1;
893
+ }
1125
894
 
1126
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1127
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
895
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
896
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
897
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1128
898
  }
1129
899
 
1130
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1131
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1132
- }
900
+ .tds-checkbox:has(input:checked){
901
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
902
+ }
1133
903
 
1134
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1135
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1136
- }
904
+ .tds-checkbox:has(input:indeterminate){
905
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
906
+ }
1137
907
 
1138
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1139
- background:var(--tds-input-scrollbar-surface-color);
1140
- }
908
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
909
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
910
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
911
+ --tds-checkbox-description-invalid-icon-display:inline-block;
912
+ }
1141
913
 
1142
- :is(.tds-input textarea)::-webkit-resizer{
1143
- background:var(--tds-input-resizer-icon) no-repeat;
1144
- background-position:right bottom;
1145
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
914
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
915
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
916
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1146
917
  }
1147
918
 
1148
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1149
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1150
- cursor:default;
919
+ :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{
920
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
921
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1151
922
  }
1152
923
 
1153
- @supports (-moz-appearance: none){
1154
- :is(.tds-input textarea){
1155
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1156
- scrollbar-width:thin;
924
+ :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){
925
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
926
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1157
927
  }
1158
928
 
1159
- @media (hover){
1160
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1161
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1162
- }
1163
- }
929
+ .tds-checkbox:has(input:required) label::after{
930
+ margin-left:.25ch;
931
+ color:var(--t-text-color-status-error);
932
+ content:"*";
1164
933
  }
1165
- }
1166
934
 
1167
- .tds-toggle-switch{
1168
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1169
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
1170
- --tds-toggle-switch-cursor:pointer;
1171
- --tds-toggle-switch-display:inline-grid;
1172
- --tds-toggle-switch-line-height:1.4;
935
+ .tds-checkbox:has(input:disabled){
936
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
937
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1173
938
 
1174
- --tds-toggle-switch-label-color:var(--t-form-color);
939
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
940
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
941
+ --tds-checkbox-cursor:not-allowed;
942
+ }
1175
943
 
1176
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1177
- --tds-toggle-switch-track-outline:none;
1178
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1179
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1180
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1181
-
1182
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1183
- --tds-toggle-switch-thumb-transform:translateX(0);
1184
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1185
-
1186
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1187
- --tds-toggle-switch-description-line-height:1.35;
1188
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1189
- position:relative;
1190
-
1191
- display:var(--tds-toggle-switch-display);
1192
- grid-template-columns:auto;
1193
- grid-auto-columns:1fr;
1194
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1195
- -webkit-user-select:none;
1196
- -moz-user-select:none;
1197
- user-select:none;
1198
- }
1199
-
1200
- .tds-toggle-switch input[type="checkbox"]{
1201
- position:absolute;
1202
- width:var(--tds-toggle-switch-track-width);
1203
- height:var(--tds-toggle-switch-track-height);
1204
- margin:0;
1205
- -webkit-appearance:none;
1206
- -moz-appearance:none;
1207
- appearance:none;
1208
- cursor:var(--tds-toggle-switch-cursor);
1209
- outline:var(--tds-toggle-switch-track-outline);
1210
- outline-offset:var(--t-focus-ring-offset);
1211
- background-color:transparent;
1212
- border:0;
1213
- border-radius:var(--t-border-radius-round);
1214
- }
1215
-
1216
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1217
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1218
- }
1219
-
1220
- .tds-toggle-switch label{
1221
- display:inline-flex;
1222
- grid-area:1 / 2;
1223
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
1224
- column-gap:var(--tds-toggle-switch-column-gap);
1225
- margin-top:-.09375em;
1226
- font-size:var(--tds-toggle-switch-font-size);
1227
- font-weight:var(--t-font-weight-normal);
1228
- line-height:var(--tds-toggle-switch-line-height);
1229
- color:var(--tds-toggle-switch-label-color);
1230
- cursor:var(--tds-toggle-switch-cursor);
1231
- }
1232
-
1233
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1234
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1235
- }
1236
-
1237
- .tds-toggle-switch:has(input:checked){
1238
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1239
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1240
- }
1241
-
1242
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1243
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
944
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
945
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1244
946
  }
1245
947
 
1246
- .tds-toggle-switch:has(input:disabled){
1247
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1248
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1249
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1250
- --tds-toggle-switch-cursor:not-allowed;
1251
- }
1252
-
1253
- .tds-toggle-switch-track{
1254
- position:relative;
1255
- flex-shrink:0;
1256
- width:var(--tds-toggle-switch-track-width);
1257
- height:var(--tds-toggle-switch-track-height);
1258
- background-color:var(--tds-toggle-switch-track-background-color);
1259
- border-radius:var(--t-border-radius-round);
1260
- transition:var(--tds-toggle-switch-track-transition);
1261
- }
1262
-
1263
- .tds-toggle-switch-track::before{
1264
- position:absolute;
1265
- top:var(--t-spacing-fourth);
1266
- left:var(--t-spacing-fourth);
1267
- width:var(--tds-toggle-switch-thumb-size);
1268
- height:var(--tds-toggle-switch-thumb-size);
1269
- content:"";
1270
- background-color:#fff;
1271
- border-radius:var(--t-border-radius-round);
1272
- transform:var(--tds-toggle-switch-thumb-transform);
1273
- transition:var(--tds-toggle-switch-thumb-transition);
1274
- }
1275
-
1276
- @media (prefers-reduced-motion: reduce){
1277
-
1278
- .tds-toggle-switch-track{
1279
- --tds-toggle-switch-track-transition:none;
1280
- --tds-toggle-switch-thumb-transition:none;
1281
- }
1282
- }
1283
-
1284
- .tds-toggle-switch-description{
948
+ .tds-checkbox-description{
1285
949
  display:flex;
1286
950
  grid-area:2 / 2;
951
+ gap:var(--t-spacing-half);
1287
952
  align-items:flex-start;
1288
953
  margin:0;
1289
- font-size:var(--tds-toggle-switch-description-font-size);
1290
- line-height:var(--tds-toggle-switch-description-line-height);
1291
- color:var(--tds-toggle-switch-description-color);
954
+ font-size:var(--tds-checkbox-description-font-size);
955
+ line-height:var(--tds-checkbox-description-line-height);
956
+ color:var(--tds-checkbox-description-color);
1292
957
  cursor:text;
1293
958
  }
1294
959
 
1295
- .tds-toggle-switch--sm{
1296
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1297
- --tds-toggle-switch-line-height:1.35;
1298
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1299
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1300
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1301
- --tds-toggle-switch-description-line-height:1.3;
1302
- }
960
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
961
+ display:var(--tds-checkbox-description-invalid-icon-display);
962
+ flex-shrink:0;
963
+ margin-top:calc(.5lh - .5em);
964
+ line-height:var(--tds-checkbox-description-line-height);
965
+ }
1303
966
 
1304
- .tds-toggle-switch--hide-label{
1305
- --tds-toggle-switch-display:inline-flex;
967
+ .tds-checkbox--sm{
968
+ --tds-checkbox-line-height:1.35;
969
+ --tds-checkbox-input-size:var(--t-element-size-sm);
970
+ --tds-checkbox-font-size:var(--t-font-size-sm);
971
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
972
+ --tds-checkbox-description-line-height:1.3;
1306
973
  }
1307
974
 
1308
975
  .tds-select{
@@ -1671,71 +1338,404 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1671
1338
  transition:var(--tds-select-caret-transition);
1672
1339
  }
1673
1340
 
1674
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1675
- opacity:var(--tds-select-dropdown-closed-opacity);
1676
- transform:var(--tds-select-dropdown-closed-transform);
1677
- transition:var(--tds-select-dropdown-transition-exit);
1341
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1342
+ opacity:var(--tds-select-dropdown-closed-opacity);
1343
+ transform:var(--tds-select-dropdown-closed-transform);
1344
+ transition:var(--tds-select-dropdown-transition-exit);
1345
+ }
1346
+
1347
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1348
+ outline-color:var(--t-focus-ring-color);
1349
+ outline-offset:var(--t-focus-ring-offset);
1350
+ border-color:var(--tds-select-border-color-active);
1351
+ }
1352
+
1353
+ :is(.tds-select select:has( > button)):open::picker-icon{
1354
+ opacity:1;
1355
+ transform:rotate(.5turn);
1356
+ }
1357
+
1358
+ :is(.tds-select select:has( > button)) selectedcontent{
1359
+ overflow:hidden;
1360
+ text-overflow:ellipsis;
1361
+ line-height:calc(var(--tds-select-min-height) - 2px);
1362
+ white-space:nowrap;
1363
+ }
1364
+
1365
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1366
+ color:var(--tds-select-placeholder-color);
1367
+ }
1368
+
1369
+ :is(.tds-select select:has( > button))::picker(select){
1370
+ inset:auto;
1371
+ inline-size:-moz-max-content;
1372
+ inline-size:max-content;
1373
+ min-inline-size:anchor-size(width);
1374
+ max-inline-size:100vi;
1375
+ padding:var(--tds-select-dropdown-padding);
1376
+ margin-block:var(--tds-select-dropdown-margin-block);
1377
+ position-try-fallbacks:flip-block, flip-inline;
1378
+ overflow:auto;
1379
+ overflow-x:hidden;
1380
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1381
+ -webkit-user-select:none;
1382
+ -moz-user-select:none;
1383
+ user-select:none;
1384
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1385
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1386
+ background:var(--tds-select-dropdown-background-color);
1387
+ border:var(--tds-select-dropdown-border);
1388
+ border-radius:var(--tds-select-dropdown-border-radius);
1389
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1390
+ opacity:var(--tds-select-dropdown-open-opacity);
1391
+ transform:var(--tds-select-dropdown-open-transform);
1392
+ transition:var(--tds-select-dropdown-transition-enter);
1393
+ }
1394
+
1395
+ :is(.tds-select select:has( > button)) option::checkmark{
1396
+ display:none;
1397
+ }
1398
+
1399
+ @starting-style{
1400
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1401
+ opacity:var(--tds-select-dropdown-closed-opacity);
1402
+ transform:var(--tds-select-dropdown-closed-transform);
1403
+ }
1404
+ }
1405
+ }
1406
+
1407
+ .tds-radio-group{
1408
+ --tds-radio-group-font-size:var(--t-font-size-md);
1409
+ --tds-radio-group-line-height:1.4;
1410
+ --tds-radio-group-gap:var(--t-spacing-1);
1411
+
1412
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1413
+
1414
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1415
+ --tds-radio-group-description-line-height:1.35;
1416
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1417
+ --tds-radio-group-description-invalid-icon-display:none;
1418
+ display:flex;
1419
+ flex-direction:column;
1420
+ gap:var(--tds-radio-group-gap);
1421
+ padding:0;
1422
+ margin:0;
1423
+
1424
+ font-size:var(--tds-radio-group-font-size);
1425
+ line-height:var(--tds-radio-group-line-height);
1426
+ border:0;
1427
+ }
1428
+
1429
+ .tds-radio-group legend{
1430
+ padding:0;
1431
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1432
+ }
1433
+
1434
+ .tds-radio-group:has(.tds-radio-group-description){
1435
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1436
+ }
1437
+
1438
+ .tds-radio-group[aria-invalid="true"]{
1439
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1440
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1441
+ }
1442
+
1443
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1444
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1445
+ }
1446
+
1447
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1448
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1449
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1450
+ }
1451
+
1452
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1453
+ --tds-radio-input-background-color:var(--t-form-background-color);
1454
+ }
1455
+
1456
+ .tds-radio-group:has(input:required) legend::after{
1457
+ margin-left:.25ch;
1458
+ color:var(--t-text-color-status-error);
1459
+ content:"*";
1460
+ }
1461
+
1462
+ .tds-radio-group-fields{
1463
+ display:flex;
1464
+ flex-direction:column;
1465
+ gap:var(--tds-radio-group-gap);
1466
+ align-items:flex-start;
1467
+ }
1468
+
1469
+ .tds-radio-group-description{
1470
+ display:flex;
1471
+ gap:var(--t-spacing-half);
1472
+ align-items:flex-start;
1473
+ margin:0;
1474
+ font-size:var(--tds-radio-group-description-font-size);
1475
+ line-height:var(--tds-radio-group-description-line-height);
1476
+ color:var(--tds-radio-group-description-color);
1477
+ cursor:text;
1478
+ }
1479
+
1480
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1481
+ display:var(--tds-radio-group-description-invalid-icon-display);
1482
+ flex-shrink:0;
1483
+ margin-top:calc(.5lh - .5em);
1484
+ line-height:var(--tds-radio-group-description-line-height);
1485
+ }
1486
+
1487
+ .tds-radio-group--sm{
1488
+ --tds-radio-group-line-height:1.35;
1489
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1490
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1491
+ --tds-radio-group-description-line-height:1.3;
1492
+ }
1493
+
1494
+ .tds-toggle-switch{
1495
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1496
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1497
+ --tds-toggle-switch-cursor:pointer;
1498
+ --tds-toggle-switch-display:inline-grid;
1499
+ --tds-toggle-switch-line-height:1.4;
1500
+
1501
+ --tds-toggle-switch-label-color:var(--t-form-color);
1502
+
1503
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1504
+ --tds-toggle-switch-track-outline:none;
1505
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1506
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1507
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1508
+
1509
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1510
+ --tds-toggle-switch-thumb-transform:translateX(0);
1511
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1512
+
1513
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1514
+ --tds-toggle-switch-description-line-height:1.35;
1515
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1516
+ position:relative;
1517
+
1518
+ display:var(--tds-toggle-switch-display);
1519
+ grid-template-columns:auto;
1520
+ grid-auto-columns:1fr;
1521
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1522
+ -webkit-user-select:none;
1523
+ -moz-user-select:none;
1524
+ user-select:none;
1525
+ }
1526
+
1527
+ .tds-toggle-switch input[type="checkbox"]{
1528
+ position:absolute;
1529
+ width:var(--tds-toggle-switch-track-width);
1530
+ height:var(--tds-toggle-switch-track-height);
1531
+ margin:0;
1532
+ -webkit-appearance:none;
1533
+ -moz-appearance:none;
1534
+ appearance:none;
1535
+ cursor:var(--tds-toggle-switch-cursor);
1536
+ outline:var(--tds-toggle-switch-track-outline);
1537
+ outline-offset:var(--t-focus-ring-offset);
1538
+ background-color:transparent;
1539
+ border:0;
1540
+ border-radius:var(--t-border-radius-round);
1541
+ }
1542
+
1543
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1544
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1545
+ }
1546
+
1547
+ .tds-toggle-switch label{
1548
+ display:inline-flex;
1549
+ grid-area:1 / 2;
1550
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1551
+ column-gap:var(--tds-toggle-switch-column-gap);
1552
+ margin-top:-.09375em;
1553
+ font-size:var(--tds-toggle-switch-font-size);
1554
+ font-weight:var(--t-font-weight-normal);
1555
+ line-height:var(--tds-toggle-switch-line-height);
1556
+ color:var(--tds-toggle-switch-label-color);
1557
+ cursor:var(--tds-toggle-switch-cursor);
1558
+ }
1559
+
1560
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1561
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1562
+ }
1563
+
1564
+ .tds-toggle-switch:has(input:checked){
1565
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1566
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1567
+ }
1568
+
1569
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1570
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1571
+ }
1572
+
1573
+ .tds-toggle-switch:has(input:disabled){
1574
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1575
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1576
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1577
+ --tds-toggle-switch-cursor:not-allowed;
1578
+ }
1579
+
1580
+ .tds-toggle-switch-track{
1581
+ position:relative;
1582
+ flex-shrink:0;
1583
+ width:var(--tds-toggle-switch-track-width);
1584
+ height:var(--tds-toggle-switch-track-height);
1585
+ background-color:var(--tds-toggle-switch-track-background-color);
1586
+ border-radius:var(--t-border-radius-round);
1587
+ transition:var(--tds-toggle-switch-track-transition);
1588
+ }
1589
+
1590
+ .tds-toggle-switch-track::before{
1591
+ position:absolute;
1592
+ top:var(--t-spacing-fourth);
1593
+ left:var(--t-spacing-fourth);
1594
+ width:var(--tds-toggle-switch-thumb-size);
1595
+ height:var(--tds-toggle-switch-thumb-size);
1596
+ content:"";
1597
+ background-color:#fff;
1598
+ border-radius:var(--t-border-radius-round);
1599
+ transform:var(--tds-toggle-switch-thumb-transform);
1600
+ transition:var(--tds-toggle-switch-thumb-transition);
1601
+ }
1602
+
1603
+ @media (prefers-reduced-motion: reduce){
1604
+
1605
+ .tds-toggle-switch-track{
1606
+ --tds-toggle-switch-track-transition:none;
1607
+ --tds-toggle-switch-thumb-transition:none;
1608
+ }
1609
+ }
1610
+
1611
+ .tds-toggle-switch-description{
1612
+ display:flex;
1613
+ grid-area:2 / 2;
1614
+ align-items:flex-start;
1615
+ margin:0;
1616
+ font-size:var(--tds-toggle-switch-description-font-size);
1617
+ line-height:var(--tds-toggle-switch-description-line-height);
1618
+ color:var(--tds-toggle-switch-description-color);
1619
+ cursor:text;
1620
+ }
1621
+
1622
+ .tds-toggle-switch--sm{
1623
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1624
+ --tds-toggle-switch-line-height:1.35;
1625
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1626
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1627
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1628
+ --tds-toggle-switch-description-line-height:1.3;
1629
+ }
1630
+
1631
+ .tds-toggle-switch--hide-label{
1632
+ --tds-toggle-switch-display:inline-flex;
1633
+ }
1634
+
1635
+ .tds-input:has(textarea){
1636
+ --tds-input-padding-block:6px;
1637
+ --tds-input-resizer-size:var(--t-element-size-sm);
1638
+ --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");
1639
+ }
1640
+
1641
+ @supports (x: attr(x type(*))){
1642
+
1643
+ .tds-input:has(textarea){
1644
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1645
+ }
1646
+ }
1647
+
1648
+ .tds-input.tds-textarea--resize-vertical textarea{
1649
+ resize:vertical;
1650
+ }
1651
+
1652
+ .tds-input.tds-textarea--resize-none textarea{
1653
+ resize:none;
1654
+ }
1655
+
1656
+ .tds-input.tds-textarea--resize-auto textarea{
1657
+ resize:vertical;
1658
+ }
1659
+
1660
+ @supports (field-sizing: content){
1661
+ .tds-input.tds-textarea--resize-auto textarea{
1662
+ field-sizing:content;
1663
+ resize:none;
1664
+ }
1665
+ }
1666
+
1667
+ .tds-input textarea{
1668
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1669
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1670
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1671
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1672
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1673
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1674
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1675
+ --tds-input-scrollbar-thumb-border-radius:999px;
1676
+ --tds-input-scrollbar-thumb-border-width:3px;
1677
+ --tds-input-scrollbar-track-margin-block:.125rem;
1678
+ scrollbar-color:initial;
1679
+ transition-timing-function:var(--t-ease-in-out);
1680
+ transition-duration:var(--t-duration-200);
1681
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1682
+ }
1683
+
1684
+ @media (pointer: fine){
1685
+ :is(.tds-input textarea)::-webkit-scrollbar{
1686
+ width:12px;
1687
+ height:12px;
1688
+ cursor:default;
1689
+ }
1690
+
1691
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1692
+ cursor:default;
1693
+ background:var(--tds-input-scrollbar-thumb-color);
1694
+ background-clip:content-box;
1695
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1696
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1678
1697
  }
1679
1698
 
1680
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1681
- outline-color:var(--t-focus-ring-color);
1682
- outline-offset:var(--t-focus-ring-offset);
1683
- border-color:var(--tds-select-border-color-active);
1699
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1700
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1684
1701
  }
1685
1702
 
1686
- :is(.tds-select select:has( > button)):open::picker-icon{
1687
- opacity:1;
1688
- transform:rotate(.5turn);
1703
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1704
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1689
1705
  }
1690
1706
 
1691
- :is(.tds-select select:has( > button)) selectedcontent{
1692
- overflow:hidden;
1693
- text-overflow:ellipsis;
1694
- line-height:calc(var(--tds-select-min-height) - 2px);
1695
- white-space:nowrap;
1707
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1708
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1696
1709
  }
1697
1710
 
1698
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1699
- color:var(--tds-select-placeholder-color);
1711
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1712
+ background:var(--tds-input-scrollbar-surface-color);
1700
1713
  }
1701
1714
 
1702
- :is(.tds-select select:has( > button))::picker(select){
1703
- inset:auto;
1704
- inline-size:-moz-max-content;
1705
- inline-size:max-content;
1706
- min-inline-size:anchor-size(width);
1707
- max-inline-size:100vi;
1708
- padding:var(--tds-select-dropdown-padding);
1709
- margin-block:var(--tds-select-dropdown-margin-block);
1710
- position-try-fallbacks:flip-block, flip-inline;
1711
- overflow:auto;
1712
- overflow-x:hidden;
1713
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1714
- -webkit-user-select:none;
1715
- -moz-user-select:none;
1716
- user-select:none;
1717
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1718
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1719
- background:var(--tds-select-dropdown-background-color);
1720
- border:var(--tds-select-dropdown-border);
1721
- border-radius:var(--tds-select-dropdown-border-radius);
1722
- box-shadow:var(--tds-select-dropdown-box-shadow);
1723
- opacity:var(--tds-select-dropdown-open-opacity);
1724
- transform:var(--tds-select-dropdown-open-transform);
1725
- transition:var(--tds-select-dropdown-transition-enter);
1715
+ :is(.tds-input textarea)::-webkit-resizer{
1716
+ background:var(--tds-input-resizer-icon) no-repeat;
1717
+ background-position:right bottom;
1718
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1726
1719
  }
1727
1720
 
1728
- :is(.tds-select select:has( > button)) option::checkmark{
1729
- display:none;
1721
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1722
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1723
+ cursor:default;
1730
1724
  }
1731
1725
 
1732
- @starting-style{
1733
- :is(.tds-select select:has( > button))::picker(select):popover-open{
1734
- opacity:var(--tds-select-dropdown-closed-opacity);
1735
- transform:var(--tds-select-dropdown-closed-transform);
1726
+ @supports (-moz-appearance: none){
1727
+ :is(.tds-input textarea){
1728
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1729
+ scrollbar-width:thin;
1730
+ }
1731
+
1732
+ @media (hover){
1733
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1734
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1735
+ }
1736
1736
  }
1737
1737
  }
1738
- }
1738
+ }
1739
1739
 
1740
1740
  .tds-input{
1741
1741
  --tds-input-border-color:var(--t-form-border-color);
@@ -3271,80 +3271,6 @@ a[class="tds-btn"]{
3271
3271
  @media (prefers-color-scheme: dark){
3272
3272
  }
3273
3273
 
3274
- .tds-checkbox-group{
3275
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3276
- --tds-checkbox-group-line-height:1.4;
3277
- --tds-checkbox-group-gap:var(--t-spacing-1);
3278
-
3279
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3280
-
3281
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3282
- --tds-checkbox-group-description-line-height:1.35;
3283
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3284
- --tds-checkbox-group-description-invalid-icon-display:none;
3285
- display:flex;
3286
- flex-direction:column;
3287
- gap:var(--tds-checkbox-group-gap);
3288
- padding:0;
3289
- margin:0;
3290
-
3291
- font-size:var(--tds-checkbox-group-font-size);
3292
- line-height:var(--tds-checkbox-group-line-height);
3293
- border:0;
3294
- }
3295
-
3296
- .tds-checkbox-group legend{
3297
- padding:0;
3298
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3299
- }
3300
-
3301
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3302
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3303
- }
3304
-
3305
- .tds-checkbox-group[aria-invalid="true"]{
3306
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3307
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3308
- }
3309
-
3310
- .tds-checkbox-group:has(input:required) legend::after{
3311
- margin-left:.25ch;
3312
- color:var(--t-text-color-status-error);
3313
- content:"*";
3314
- }
3315
-
3316
- .tds-checkbox-group-fields{
3317
- display:flex;
3318
- flex-direction:column;
3319
- gap:var(--tds-checkbox-group-gap);
3320
- align-items:flex-start;
3321
- }
3322
-
3323
- .tds-checkbox-group-description{
3324
- display:flex;
3325
- gap:var(--t-spacing-half);
3326
- align-items:flex-start;
3327
- margin:0;
3328
- font-size:var(--tds-checkbox-group-description-font-size);
3329
- line-height:var(--tds-checkbox-group-description-line-height);
3330
- color:var(--tds-checkbox-group-description-color);
3331
- cursor:text;
3332
- }
3333
-
3334
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3335
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3336
- flex-shrink:0;
3337
- margin-top:calc(.5lh - .5em);
3338
- line-height:var(--tds-checkbox-group-description-line-height);
3339
- }
3340
-
3341
- .tds-checkbox-group--sm{
3342
- --tds-checkbox-group-line-height:1.35;
3343
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3344
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3345
- --tds-checkbox-group-description-line-height:1.3;
3346
- }
3347
-
3348
3274
  .tds-date-picker{
3349
3275
  --tds-date-picker-border-color:var(--t-form-border-color);
3350
3276
  --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
@@ -3383,12 +3309,9 @@ a[class="tds-btn"]{
3383
3309
  --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3384
3310
  --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3385
3311
  --tds-date-picker-color:var(--t-form-color-disabled);
3312
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3386
3313
  }
3387
3314
 
3388
- .tds-date-picker[data-disabled] .tds-date-picker-label{
3389
- color:var(--t-form-color-disabled);
3390
- }
3391
-
3392
3315
  .tds-date-picker[data-disabled] .tds-date-picker-field{
3393
3316
  cursor:not-allowed;
3394
3317
  }
@@ -3417,7 +3340,7 @@ a[class="tds-btn"]{
3417
3340
  -webkit-appearance:none;
3418
3341
  -moz-appearance:none;
3419
3342
  appearance:none;
3420
- cursor:default;
3343
+ cursor:text;
3421
3344
  outline:var(--t-focus-ring-width) solid transparent;
3422
3345
  outline-offset:0;
3423
3346
  background-color:var(--tds-date-picker-background-color);
@@ -3435,24 +3358,31 @@ a[class="tds-btn"]{
3435
3358
  border-color:var(--tds-date-picker-border-color-active);
3436
3359
  }
3437
3360
 
3361
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3362
+ color:var(--t-form-color-readonly);
3363
+ background-color:var(--t-form-background-color-readonly);
3364
+ border-color:var(--t-form-border-color-readonly);
3365
+ }
3366
+
3367
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3368
+ border-color:var(--t-form-border-color-readonly);
3369
+ }
3370
+
3371
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3372
+ outline-color:var(--t-focus-ring-color);
3373
+ outline-offset:var(--t-focus-ring-offset);
3374
+ border-color:var(--t-form-border-color-hover);
3375
+ }
3376
+
3438
3377
  .tds-date-picker-input{
3439
- display:flex;
3440
3378
  flex:1;
3441
- align-items:center;
3442
3379
  padding-block:var(--tds-date-picker-padding-block);
3443
3380
  padding-inline-start:var(--t-spacing-1);
3444
- font-family:inherit;
3445
- font-size:inherit;
3446
3381
  font-variant-numeric:tabular-nums;
3447
- color:inherit;
3448
- outline:0;
3449
- background:transparent;
3450
- border:0;
3451
3382
  }
3452
3383
 
3453
3384
  .tds-date-picker-segment{
3454
- padding-inline:1px;
3455
- font-variant-numeric:tabular-nums;
3385
+ padding-inline:2px;
3456
3386
  caret-color:transparent;
3457
3387
  border-radius:var(--t-border-radius-sm);
3458
3388
  }
@@ -3669,6 +3599,80 @@ a[class="tds-btn"]{
3669
3599
  color:var(--t-text-color-secondary);
3670
3600
  }
3671
3601
 
3602
+ .tds-checkbox-group{
3603
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3604
+ --tds-checkbox-group-line-height:1.4;
3605
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3606
+
3607
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3608
+
3609
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3610
+ --tds-checkbox-group-description-line-height:1.35;
3611
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3612
+ --tds-checkbox-group-description-invalid-icon-display:none;
3613
+ display:flex;
3614
+ flex-direction:column;
3615
+ gap:var(--tds-checkbox-group-gap);
3616
+ padding:0;
3617
+ margin:0;
3618
+
3619
+ font-size:var(--tds-checkbox-group-font-size);
3620
+ line-height:var(--tds-checkbox-group-line-height);
3621
+ border:0;
3622
+ }
3623
+
3624
+ .tds-checkbox-group legend{
3625
+ padding:0;
3626
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3627
+ }
3628
+
3629
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3630
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3631
+ }
3632
+
3633
+ .tds-checkbox-group[aria-invalid="true"]{
3634
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3635
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3636
+ }
3637
+
3638
+ .tds-checkbox-group:has(input:required) legend::after{
3639
+ margin-left:.25ch;
3640
+ color:var(--t-text-color-status-error);
3641
+ content:"*";
3642
+ }
3643
+
3644
+ .tds-checkbox-group-fields{
3645
+ display:flex;
3646
+ flex-direction:column;
3647
+ gap:var(--tds-checkbox-group-gap);
3648
+ align-items:flex-start;
3649
+ }
3650
+
3651
+ .tds-checkbox-group-description{
3652
+ display:flex;
3653
+ gap:var(--t-spacing-half);
3654
+ align-items:flex-start;
3655
+ margin:0;
3656
+ font-size:var(--tds-checkbox-group-description-font-size);
3657
+ line-height:var(--tds-checkbox-group-description-line-height);
3658
+ color:var(--tds-checkbox-group-description-color);
3659
+ cursor:text;
3660
+ }
3661
+
3662
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3663
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3664
+ flex-shrink:0;
3665
+ margin-top:calc(.5lh - .5em);
3666
+ line-height:var(--tds-checkbox-group-description-line-height);
3667
+ }
3668
+
3669
+ .tds-checkbox-group--sm{
3670
+ --tds-checkbox-group-line-height:1.35;
3671
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3672
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3673
+ --tds-checkbox-group-description-line-height:1.3;
3674
+ }
3675
+
3672
3676
  .t-banner{
3673
3677
  --t-banner-font-size:var(--t-font-size-md);
3674
3678
  --t-banner-font-color:var(--t-text-color);