@planningcenter/tapestry 3.3.0-rc.2 → 3.3.0-rc.3

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 (51) hide show
  1. package/dist/components/page-header/index.js +1 -1
  2. package/dist/components/sidenav/index.js +1 -1
  3. package/dist/packages/tapestry-wc/dist/components/{p-BxfIRl2_.js → p-BFym9j2w.js} +2 -2
  4. package/dist/packages/tapestry-wc/dist/components/{p-BxfIRl2_.js.map → p-BFym9j2w.js.map} +1 -1
  5. package/dist/packages/tapestry-wc/dist/components/{p-CI2VB8nN.js → p-BXehCwhh.js} +3 -3
  6. package/dist/packages/tapestry-wc/dist/components/{p-CI2VB8nN.js.map → p-BXehCwhh.js.map} +1 -1
  7. package/dist/{tapestry-wc/dist/components/p-Bdu1ytgc.js → packages/tapestry-wc/dist/components/p-Bj2XSszM.js} +3 -3
  8. package/dist/packages/tapestry-wc/dist/components/{p-Bdu1ytgc.js.map → p-Bj2XSszM.js.map} +1 -1
  9. package/dist/packages/tapestry-wc/dist/components/{p-BdFrP7VV.js → p-BxkuUtYH.js} +3 -3
  10. package/dist/packages/tapestry-wc/dist/components/{p-BdFrP7VV.js.map → p-BxkuUtYH.js.map} +1 -1
  11. package/dist/packages/tapestry-wc/dist/components/{p-Bm8M-zM-.js → p-CAR9T7SF.js} +2 -2
  12. package/dist/packages/tapestry-wc/dist/components/{p-Bm8M-zM-.js.map → p-CAR9T7SF.js.map} +1 -1
  13. package/dist/packages/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  14. package/dist/packages/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  15. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js +3 -3
  16. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  17. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  18. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  19. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  20. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  21. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  22. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  23. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  24. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  25. package/dist/reactRender.css +1533 -1533
  26. package/dist/reactRender.css.map +1 -1
  27. package/dist/reactRenderLegacy.css +1533 -1533
  28. package/dist/reactRenderLegacy.css.map +1 -1
  29. package/dist/tapestry-wc/dist/components/{p-BxfIRl2_.js → p-BFym9j2w.js} +2 -2
  30. package/dist/tapestry-wc/dist/components/{p-BxfIRl2_.js.map → p-BFym9j2w.js.map} +1 -1
  31. package/dist/tapestry-wc/dist/components/{p-CI2VB8nN.js → p-BXehCwhh.js} +3 -3
  32. package/dist/tapestry-wc/dist/components/{p-CI2VB8nN.js.map → p-BXehCwhh.js.map} +1 -1
  33. package/dist/{packages/tapestry-wc/dist/components/p-Bdu1ytgc.js → tapestry-wc/dist/components/p-Bj2XSszM.js} +3 -3
  34. package/dist/tapestry-wc/dist/components/{p-Bdu1ytgc.js.map → p-Bj2XSszM.js.map} +1 -1
  35. package/dist/tapestry-wc/dist/components/{p-BdFrP7VV.js → p-BxkuUtYH.js} +3 -3
  36. package/dist/tapestry-wc/dist/components/{p-BdFrP7VV.js.map → p-BxkuUtYH.js.map} +1 -1
  37. package/dist/tapestry-wc/dist/components/{p-Bm8M-zM-.js → p-CAR9T7SF.js} +2 -2
  38. package/dist/tapestry-wc/dist/components/{p-Bm8M-zM-.js.map → p-CAR9T7SF.js.map} +1 -1
  39. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  40. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  41. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  42. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  43. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  44. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  45. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  46. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  47. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  48. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  49. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  50. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  51. package/package.json +3 -3
package/dist/reactRender.css CHANGED
@@ -638,406 +638,198 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
638
638
  }
639
639
  }
640
640
 
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;
641
646
 
642
- :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{
643
- -webkit-appearance:none;
644
- appearance:none;
645
- }
646
-
647
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
648
- inline-size:1em;
649
- block-size:2em;
650
- }
651
-
652
- @supports (field-sizing: content){
653
- .tds-input--auto-width{
654
- inline-size:-moz-fit-content;
655
- inline-size:fit-content;
656
- min-inline-size:min(100%, 122px);
657
- }
658
-
659
- .tds-input--auto-width input{
660
- field-sizing:content;
661
- inline-size:auto;
662
- }
663
- }
664
-
665
- .tds-input:has(textarea){
666
- --tds-input-padding-block:6px;
667
- --tds-input-resizer-size:var(--t-element-size-sm);
668
- --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");
669
- }
670
-
671
- @supports (x: attr(x type(*))){
672
-
673
- .tds-input:has(textarea){
674
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
675
- }
676
- }
677
-
678
- .tds-input.tds-textarea--resize-vertical textarea{
679
- resize:vertical;
680
- }
681
-
682
- .tds-input.tds-textarea--resize-none textarea{
683
- resize:none;
684
- }
685
-
686
- .tds-input.tds-textarea--resize-auto textarea{
687
- resize:vertical;
688
- }
689
-
690
- @supports (field-sizing: content){
691
- .tds-input.tds-textarea--resize-auto textarea{
692
- field-sizing:content;
693
- resize:none;
694
- }
695
- }
696
-
697
- .tds-input textarea{
698
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
699
- --tds-input-scrollbar-thumb-color-hidden:transparent;
700
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
701
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
702
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
703
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
704
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
705
- --tds-input-scrollbar-thumb-border-radius:999px;
706
- --tds-input-scrollbar-thumb-border-width:3px;
707
- --tds-input-scrollbar-track-margin-block:.125rem;
708
- scrollbar-color:initial;
709
- transition-timing-function:var(--t-ease-in-out);
710
- transition-duration:var(--t-duration-200);
711
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
712
- }
713
-
714
- @media (pointer: fine){
715
- :is(.tds-input textarea)::-webkit-scrollbar{
716
- width:12px;
717
- height:12px;
718
- cursor:default;
719
- }
720
-
721
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
722
- cursor:default;
723
- background:var(--tds-input-scrollbar-thumb-color);
724
- background-clip:content-box;
725
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
726
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
727
- }
728
-
729
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
730
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
731
- }
732
-
733
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
734
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
735
- }
736
-
737
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
738
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
739
- }
740
-
741
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
742
- background:var(--tds-input-scrollbar-surface-color);
743
- }
744
-
745
- :is(.tds-input textarea)::-webkit-resizer{
746
- background:var(--tds-input-resizer-icon) no-repeat;
747
- background-position:right bottom;
748
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
749
- }
750
-
751
- :is(.tds-input textarea)::-webkit-scrollbar-track{
752
- margin-block:var(--tds-input-scrollbar-track-margin-block);
753
- cursor:default;
754
- }
755
-
756
- @supports (-moz-appearance: none){
757
- :is(.tds-input textarea){
758
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
759
- scrollbar-width:thin;
760
- }
761
-
762
- @media (hover){
763
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
764
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
765
- }
766
- }
767
- }
768
- }
769
-
770
- .tds-radio{
771
- --tds-radio-font-size:var(--t-font-size-md);
772
- --tds-radio-cursor:pointer;
773
- --tds-radio-line-height:1.4;
774
- --tds-radio-transition-property:border-width;
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;
775
651
 
776
- --tds-radio-input-size:var(--t-element-size-md);
777
- --tds-radio-input-border-radius:var(--t-border-radius-round);
778
- --tds-radio-input-border-color:var(--t-form-border-color);
779
- --tds-radio-input-border-width:var(--t-form-border-width);
780
- --tds-radio-input-background-color:transparent;
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);
781
656
 
782
- --tds-radio-label-color:var(--t-form-color);
657
+ --tds-checkbox-label-color:var(--t-form-color);
783
658
 
784
- --tds-radio-description-font-size:var(--t-font-size-sm);
785
- --tds-radio-description-line-height:1.35;
786
- --tds-radio-description-color:var(--t-text-color-secondary);
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;
787
663
 
788
664
  position:relative;
789
665
  display:inline-grid;
790
666
  grid-template-columns:auto;
791
667
  grid-auto-columns:1fr;
792
668
  gap:var(--t-spacing-fourth) var(--t-spacing-1);
793
- line-height:var(--tds-radio-line-height);
794
- cursor:var(--tds-radio-cursor);
669
+ line-height:var(--tds-checkbox-line-height);
670
+ cursor:var(--tds-checkbox-cursor);
795
671
  -webkit-user-select:none;
796
672
  -moz-user-select:none;
797
673
  user-select:none;
798
674
  }
799
675
 
800
- .tds-radio label{
676
+ .tds-checkbox label{
801
677
  grid-area:1 / 2;
802
- font-size:var(--tds-radio-font-size);
678
+ font-size:var(--tds-checkbox-font-size);
803
679
  font-weight:var(--t-font-weight-normal);
804
- color:var(--tds-radio-label-color);
805
- cursor:var(--tds-radio-cursor);
680
+ color:var(--tds-checkbox-label-color);
681
+ cursor:var(--tds-checkbox-cursor);
806
682
  }
807
683
 
808
- .tds-radio input[type="radio"]{
684
+ .tds-checkbox tds-indeterminate{
685
+ display:flex;
686
+ }
687
+
688
+ .tds-checkbox input[type="checkbox"]{
809
689
  position:relative;
810
690
  width:1em;
811
691
  height:1em;
812
692
  margin:calc((1lh - 1em) / 2) 0 0;
813
- font-size:var(--tds-radio-font-size);
693
+ font-size:var(--tds-checkbox-font-size);
814
694
  line-height:inherit;
815
695
  -webkit-appearance:none;
816
696
  -moz-appearance:none;
817
697
  appearance:none;
818
- cursor:var(--tds-radio-cursor);
819
- background-color:var(--tds-radio-input-background-color);
820
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
821
- border-radius:var(--tds-radio-input-border-radius);
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);
822
702
  transition-timing-function:var(--t-ease-in-out);
823
703
  transition-duration:var(--t-duration-200);
824
- transition-property:var(--tds-radio-transition-property);
704
+ transition-property:var(--tds-checkbox-transition-property);
825
705
  }
826
706
 
827
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
828
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
829
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
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%);
830
725
  }
831
726
 
832
- :is(.tds-radio input[type="radio"]):focus-visible{
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{
833
733
  outline:var(--t-focus-ring-outline);
834
734
  outline-offset:var(--t-focus-ring-offset);
835
735
  }
836
736
 
837
- :is(.tds-radio input[type="radio"]):disabled{
737
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
838
738
  pointer-events:none;
839
739
  }
840
740
 
841
741
  @media (prefers-reduced-motion: reduce){
842
742
 
843
- .tds-radio input[type="radio"]{
844
- --tds-radio-transition-property:none;
743
+ .tds-checkbox input[type="checkbox"]{
744
+ --tds-checkbox-transition-property:none;
845
745
  }
846
746
  }
847
747
 
848
- .tds-radio:has(input:checked){
849
- --tds-radio-input-background-color:var(--t-form-background-color);
850
- --tds-radio-input-border-color:var(--t-border-color-control-info);
851
- --tds-radio-input-border-width:4px;
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;
852
753
  }
853
754
 
854
- .tds-radio:has(input:checked) input:hover:not(:disabled){
855
- --tds-radio-input-background-color:var(--t-form-background-color);
856
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
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);
857
758
  }
858
759
 
859
- .tds-radio:has(input:user-invalid){
860
- --tds-radio-input-border-color:var(--t-form-border-color-error);
760
+ .tds-checkbox:has(input:checked){
761
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
861
762
  }
862
763
 
863
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
864
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
865
- --tds-radio-input-background-color:var(--t-form-background-color-error);
866
- }
867
-
868
- .tds-radio:has(input:disabled){
869
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
870
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
764
+ .tds-checkbox:has(input:indeterminate){
765
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
766
+ }
871
767
 
872
- --tds-radio-label-color:var(--t-form-color-disabled);
873
- --tds-radio-description-color:var(--t-form-color-disabled);
874
- --tds-radio-cursor:not-allowed;
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;
875
772
  }
876
773
 
877
- .tds-radio:has(input:disabled) input:checked{
878
- --tds-radio-input-background-color:var(--t-form-background-color);
879
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
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);
880
777
  }
881
778
 
882
- .tds-radio-description{
883
- display:flex;
884
- grid-area:2 / 2;
885
- gap:var(--t-spacing-half);
886
- align-items:flex-start;
887
- margin:0;
888
- font-size:var(--tds-radio-description-font-size);
889
- line-height:var(--tds-radio-description-line-height);
890
- color:var(--tds-radio-description-color);
891
- cursor:text;
892
- }
893
-
894
- .tds-radio--sm{
895
- --tds-radio-line-height:1.35;
896
- --tds-radio-input-size:var(--t-element-size-sm);
897
- --tds-radio-font-size:var(--t-font-size-sm);
898
- --tds-radio-description-font-size:var(--t-font-size-xs);
899
- --tds-radio-description-line-height:1.3;
900
- }
901
-
902
- .tds-toggle-switch{
903
- --tds-toggle-switch-font-size:var(--t-font-size-md);
904
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
905
- --tds-toggle-switch-cursor:pointer;
906
- --tds-toggle-switch-display:inline-grid;
907
- --tds-toggle-switch-line-height:1.4;
908
-
909
- --tds-toggle-switch-label-color:var(--t-form-color);
910
-
911
- --tds-toggle-switch-track-width:var(--t-container-size-md);
912
- --tds-toggle-switch-track-outline:none;
913
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
914
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
915
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
916
-
917
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
918
- --tds-toggle-switch-thumb-transform:translateX(0);
919
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
920
-
921
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
922
- --tds-toggle-switch-description-line-height:1.35;
923
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
924
- position:relative;
925
-
926
- display:var(--tds-toggle-switch-display);
927
- grid-template-columns:auto;
928
- grid-auto-columns:1fr;
929
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
930
- -webkit-user-select:none;
931
- -moz-user-select:none;
932
- user-select:none;
933
- }
934
-
935
- .tds-toggle-switch input[type="checkbox"]{
936
- position:absolute;
937
- width:var(--tds-toggle-switch-track-width);
938
- height:var(--tds-toggle-switch-track-height);
939
- margin:0;
940
- -webkit-appearance:none;
941
- -moz-appearance:none;
942
- appearance:none;
943
- cursor:var(--tds-toggle-switch-cursor);
944
- outline:var(--tds-toggle-switch-track-outline);
945
- outline-offset:var(--t-focus-ring-offset);
946
- background-color:transparent;
947
- border:0;
948
- border-radius:var(--t-border-radius-round);
949
- }
950
-
951
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
952
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
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);
953
782
  }
954
783
 
955
- .tds-toggle-switch label{
956
- display:inline-flex;
957
- grid-area:1 / 2;
958
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
959
- column-gap:var(--tds-toggle-switch-column-gap);
960
- margin-top:-.09375em;
961
- font-size:var(--tds-toggle-switch-font-size);
962
- font-weight:var(--t-font-weight-normal);
963
- line-height:var(--tds-toggle-switch-line-height);
964
- color:var(--tds-toggle-switch-label-color);
965
- cursor:var(--tds-toggle-switch-cursor);
966
- }
967
-
968
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
969
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
970
- }
971
-
972
- .tds-toggle-switch:has(input:checked){
973
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
974
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
975
- }
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
+ }
976
788
 
977
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
978
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
789
+ .tds-checkbox:has(input:required) label::after{
790
+ margin-left:.25ch;
791
+ color:var(--t-text-color-status-error);
792
+ content:"*";
979
793
  }
980
794
 
981
- .tds-toggle-switch:has(input:disabled){
982
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
983
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
984
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
985
- --tds-toggle-switch-cursor:not-allowed;
986
- }
987
-
988
- .tds-toggle-switch-track{
989
- position:relative;
990
- flex-shrink:0;
991
- width:var(--tds-toggle-switch-track-width);
992
- height:var(--tds-toggle-switch-track-height);
993
- background-color:var(--tds-toggle-switch-track-background-color);
994
- border-radius:var(--t-border-radius-round);
995
- transition:var(--tds-toggle-switch-track-transition);
996
- }
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);
997
798
 
998
- .tds-toggle-switch-track::before{
999
- position:absolute;
1000
- top:var(--t-spacing-fourth);
1001
- left:var(--t-spacing-fourth);
1002
- width:var(--tds-toggle-switch-thumb-size);
1003
- height:var(--tds-toggle-switch-thumb-size);
1004
- content:"";
1005
- background-color:#fff;
1006
- border-radius:var(--t-border-radius-round);
1007
- transform:var(--tds-toggle-switch-thumb-transform);
1008
- transition:var(--tds-toggle-switch-thumb-transition);
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;
1009
802
  }
1010
803
 
1011
- @media (prefers-reduced-motion: reduce){
1012
-
1013
- .tds-toggle-switch-track{
1014
- --tds-toggle-switch-track-transition:none;
1015
- --tds-toggle-switch-thumb-transition:none;
1016
- }
1017
- }
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
+ }
1018
807
 
1019
- .tds-toggle-switch-description{
808
+ .tds-checkbox-description{
1020
809
  display:flex;
1021
810
  grid-area:2 / 2;
811
+ gap:var(--t-spacing-half);
1022
812
  align-items:flex-start;
1023
813
  margin:0;
1024
- font-size:var(--tds-toggle-switch-description-font-size);
1025
- line-height:var(--tds-toggle-switch-description-line-height);
1026
- color:var(--tds-toggle-switch-description-color);
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);
1027
817
  cursor:text;
1028
818
  }
1029
819
 
1030
- .tds-toggle-switch--sm{
1031
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1032
- --tds-toggle-switch-line-height:1.35;
1033
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1034
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1035
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1036
- --tds-toggle-switch-description-line-height:1.3;
1037
- }
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
+ }
1038
826
 
1039
- .tds-toggle-switch--hide-label{
1040
- --tds-toggle-switch-display:inline-flex;
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;
1041
833
  }
1042
834
 
1043
835
  .tds-radio-group{
@@ -1127,993 +919,1201 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1127
919
  --tds-radio-group-description-line-height:1.3;
1128
920
  }
1129
921
 
1130
- .tds-checkbox{
1131
- --tds-checkbox-font-size:var(--t-font-size-md);
1132
- --tds-checkbox-cursor:pointer;
1133
- --tds-checkbox-line-height:1.4;
1134
- --tds-checkbox-transition-property:background-color, border-color;
1135
-
1136
- --tds-checkbox-input-size:var(--t-element-size-md);
1137
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1138
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1139
- --tds-checkbox-input-background-color:transparent;
922
+ .tds-input:has(textarea){
923
+ --tds-input-padding-block:6px;
924
+ --tds-input-resizer-size:var(--t-element-size-sm);
925
+ --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");
926
+ }
1140
927
 
1141
- --tds-checkbox-input-icon:none;
1142
- --tds-checkbox-input-icon-visibility:hidden;
1143
- --tds-checkbox-input-icon-opacity:0;
1144
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
928
+ @supports (x: attr(x type(*))){
1145
929
 
1146
- --tds-checkbox-label-color:var(--t-form-color);
930
+ .tds-input:has(textarea){
931
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
932
+ }
933
+ }
1147
934
 
1148
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1149
- --tds-checkbox-description-line-height:1.35;
1150
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1151
- --tds-checkbox-description-invalid-icon-display:none;
935
+ .tds-input.tds-textarea--resize-vertical textarea{
936
+ resize:vertical;
937
+ }
1152
938
 
1153
- position:relative;
1154
- display:inline-grid;
1155
- grid-template-columns:auto;
1156
- grid-auto-columns:1fr;
1157
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1158
- line-height:var(--tds-checkbox-line-height);
1159
- cursor:var(--tds-checkbox-cursor);
1160
- -webkit-user-select:none;
1161
- -moz-user-select:none;
1162
- user-select:none;
1163
- }
939
+ .tds-input.tds-textarea--resize-none textarea{
940
+ resize:none;
941
+ }
1164
942
 
1165
- .tds-checkbox label{
1166
- grid-area:1 / 2;
1167
- font-size:var(--tds-checkbox-font-size);
1168
- font-weight:var(--t-font-weight-normal);
1169
- color:var(--tds-checkbox-label-color);
1170
- cursor:var(--tds-checkbox-cursor);
1171
- }
943
+ .tds-input.tds-textarea--resize-auto textarea{
944
+ resize:vertical;
945
+ }
1172
946
 
1173
- .tds-checkbox tds-indeterminate{
1174
- display:flex;
1175
- }
947
+ @supports (field-sizing: content){
948
+ .tds-input.tds-textarea--resize-auto textarea{
949
+ field-sizing:content;
950
+ resize:none;
951
+ }
952
+ }
1176
953
 
1177
- .tds-checkbox input[type="checkbox"]{
1178
- position:relative;
1179
- width:1em;
1180
- height:1em;
1181
- margin:calc((1lh - 1em) / 2) 0 0;
1182
- font-size:var(--tds-checkbox-font-size);
1183
- line-height:inherit;
1184
- -webkit-appearance:none;
1185
- -moz-appearance:none;
1186
- appearance:none;
1187
- cursor:var(--tds-checkbox-cursor);
1188
- background-color:var(--tds-checkbox-input-background-color);
1189
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1190
- border-radius:var(--tds-checkbox-input-border-radius);
1191
- transition-timing-function:var(--t-ease-in-out);
1192
- transition-duration:var(--t-duration-200);
1193
- transition-property:var(--tds-checkbox-transition-property);
1194
- }
954
+ .tds-input textarea{
955
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
956
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
957
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
958
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
959
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
960
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
961
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
962
+ --tds-input-scrollbar-thumb-border-radius:999px;
963
+ --tds-input-scrollbar-thumb-border-width:3px;
964
+ --tds-input-scrollbar-track-margin-block:.125rem;
965
+ scrollbar-color:initial;
966
+ transition-timing-function:var(--t-ease-in-out);
967
+ transition-duration:var(--t-duration-200);
968
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
969
+ }
1195
970
 
1196
- :is(.tds-checkbox input[type="checkbox"])::before{
1197
- position:absolute;
1198
- top:50%;
1199
- left:50%;
1200
- visibility:var(--tds-checkbox-input-icon-visibility);
1201
- width:100%;
1202
- height:100%;
1203
- content:"";
1204
- background-color:var(--tds-checkbox-input-icon-fill);
1205
- border-radius:var(--tds-checkbox-input-border-radius);
1206
- opacity:var(--tds-checkbox-input-icon-opacity);
1207
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1208
- mask-image:var(--tds-checkbox-input-icon);
1209
- -webkit-mask-repeat:no-repeat;
1210
- mask-repeat:no-repeat;
1211
- -webkit-mask-size:contain;
1212
- mask-size:contain;
1213
- transform:translate(-50%, -50%);
971
+ @media (pointer: fine){
972
+ :is(.tds-input textarea)::-webkit-scrollbar{
973
+ width:12px;
974
+ height:12px;
975
+ cursor:default;
1214
976
  }
1215
977
 
1216
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1217
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1218
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
978
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
979
+ cursor:default;
980
+ background:var(--tds-input-scrollbar-thumb-color);
981
+ background-clip:content-box;
982
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
983
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1219
984
  }
1220
985
 
1221
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1222
- outline:var(--t-focus-ring-outline);
1223
- outline-offset:var(--t-focus-ring-offset);
986
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
987
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1224
988
  }
1225
989
 
1226
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1227
- pointer-events:none;
990
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
991
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1228
992
  }
1229
993
 
1230
- @media (prefers-reduced-motion: reduce){
1231
-
1232
- .tds-checkbox input[type="checkbox"]{
1233
- --tds-checkbox-transition-property:none;
1234
- }
994
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
995
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1235
996
  }
1236
997
 
1237
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1238
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1239
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1240
- --tds-checkbox-input-icon-visibility:visible;
1241
- --tds-checkbox-input-icon-opacity:1;
1242
- }
1243
-
1244
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1245
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1246
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
998
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
999
+ background:var(--tds-input-scrollbar-surface-color);
1247
1000
  }
1248
1001
 
1249
- .tds-checkbox:has(input:checked){
1250
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1251
- }
1252
-
1253
- .tds-checkbox:has(input:indeterminate){
1254
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1255
- }
1256
-
1257
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1258
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1259
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1260
- --tds-checkbox-description-invalid-icon-display:inline-block;
1261
- }
1262
-
1263
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1264
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1265
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1002
+ :is(.tds-input textarea)::-webkit-resizer{
1003
+ background:var(--tds-input-resizer-icon) no-repeat;
1004
+ background-position:right bottom;
1005
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1266
1006
  }
1267
1007
 
1268
- :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{
1269
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1270
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1008
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1009
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1010
+ cursor:default;
1271
1011
  }
1272
1012
 
1273
- :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){
1274
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1275
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1013
+ @supports (-moz-appearance: none){
1014
+ :is(.tds-input textarea){
1015
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1016
+ scrollbar-width:thin;
1276
1017
  }
1277
1018
 
1278
- .tds-checkbox:has(input:required) label::after{
1279
- margin-left:.25ch;
1280
- color:var(--t-text-color-status-error);
1281
- content:"*";
1019
+ @media (hover){
1020
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1021
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1022
+ }
1023
+ }
1282
1024
  }
1283
-
1284
- .tds-checkbox:has(input:disabled){
1285
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1286
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1287
-
1288
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1289
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1290
- --tds-checkbox-cursor:not-allowed;
1291
1025
  }
1292
1026
 
1293
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1294
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1027
+
1028
+ :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{
1029
+ -webkit-appearance:none;
1030
+ appearance:none;
1295
1031
  }
1296
1032
 
1297
- .tds-checkbox-description{
1298
- display:flex;
1299
- grid-area:2 / 2;
1300
- gap:var(--t-spacing-half);
1301
- align-items:flex-start;
1302
- margin:0;
1303
- font-size:var(--tds-checkbox-description-font-size);
1304
- line-height:var(--tds-checkbox-description-line-height);
1305
- color:var(--tds-checkbox-description-color);
1306
- cursor:text;
1307
- }
1033
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1034
+ inline-size:1em;
1035
+ block-size:2em;
1036
+ }
1308
1037
 
1309
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1310
- display:var(--tds-checkbox-description-invalid-icon-display);
1311
- flex-shrink:0;
1312
- margin-top:calc(.5lh - .5em);
1313
- line-height:var(--tds-checkbox-description-line-height);
1038
+ @supports (field-sizing: content){
1039
+ .tds-input--auto-width{
1040
+ inline-size:-moz-fit-content;
1041
+ inline-size:fit-content;
1042
+ min-inline-size:min(100%, 122px);
1314
1043
  }
1315
1044
 
1316
- .tds-checkbox--sm{
1317
- --tds-checkbox-line-height:1.35;
1318
- --tds-checkbox-input-size:var(--t-element-size-sm);
1319
- --tds-checkbox-font-size:var(--t-font-size-sm);
1320
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1321
- --tds-checkbox-description-line-height:1.3;
1045
+ .tds-input--auto-width input{
1046
+ field-sizing:content;
1047
+ inline-size:auto;
1048
+ }
1322
1049
  }
1323
1050
 
1324
- .tds-select{
1325
- --tds-select-border-color:var(--t-form-border-color);
1326
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
1327
- --tds-select-border-color-active:var(--t-form-border-color-hover);
1328
- --tds-select-background-color:var(--t-form-background-color);
1329
- --tds-select-color:var(--t-form-color);
1330
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
1331
- --tds-select-font-size:var(--t-font-size-md);
1332
- --tds-select-min-height:var(--t-container-size-md);
1333
- --tds-select-padding-block:6px;
1334
- --tds-select-description-color:var(--t-text-color-secondary);
1335
- --tds-select-description-invalid-icon-display:none;
1336
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1337
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1338
- --tds-select-caret-size:1em;
1339
- --tds-select-caret-inline-offset:.75em;
1340
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1051
+ .tds-toggle-switch{
1052
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1053
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1054
+ --tds-toggle-switch-cursor:pointer;
1055
+ --tds-toggle-switch-display:inline-grid;
1056
+ --tds-toggle-switch-line-height:1.4;
1341
1057
 
1342
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
1343
- --tds-select-dropdown-border:1px solid var(--t-border-color);
1344
- --tds-select-dropdown-padding:var(--t-spacing-1);
1345
- --tds-select-dropdown-margin-block:5px;
1346
- --tds-select-dropdown-scrollbar-color:#0004 #0000;
1347
- --tds-select-dropdown-scrollbar-width:thin;
1348
- --tds-select-dropdown-border-radius:var(--t-border-radius);
1349
- --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1350
- --tds-select-dropdown-scroll-behavior:smooth;
1351
- --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;
1352
- --tds-select-dropdown-closed-opacity:0;
1353
- --tds-select-dropdown-open-opacity:1;
1354
- --tds-select-dropdown-closed-translate:0 -8px;
1355
- --tds-select-dropdown-open-translate:0 0;
1058
+ --tds-toggle-switch-label-color:var(--t-form-color);
1356
1059
 
1357
- --tds-select-option-gap:var(--t-spacing-1);
1358
- --tds-select-option-padding-block:var(--t-spacing-1);
1359
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1360
- --tds-select-option-font-size:1rem;
1361
- --tds-select-option-color:var(--t-text-color);
1362
- --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1363
- --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1364
- --tds-select-option-border-radius:var(--t-border-radius);
1060
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1061
+ --tds-toggle-switch-track-outline:none;
1062
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1063
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1064
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1365
1065
 
1366
- --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1367
- --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1368
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
1369
- --tds-select-group-label-font-size:var(--t-font-size-sm);
1370
- --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1371
- --tds-select-group-label-letter-spacing:0;
1372
- --tds-select-group-label-color:var(--t-text-color-secondary);
1373
- --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1374
- --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1375
- --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
1066
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1067
+ --tds-toggle-switch-thumb-transform:translateX(0);
1068
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1376
1069
 
1070
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1071
+ --tds-toggle-switch-description-line-height:1.35;
1072
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1377
1073
  position:relative;
1378
- display:flex;
1379
- flex-direction:column;
1380
- gap:var(--t-spacing-half);
1381
- }
1382
1074
 
1383
- .tds-select :is(label,.tds-select-label){
1384
- font-size:var(--t-font-size-md);
1385
- font-weight:var(--t-font-weight-normal);
1386
- color:var(--t-text-color);
1387
- cursor:default;
1388
- }
1075
+ display:var(--tds-toggle-switch-display);
1076
+ grid-template-columns:auto;
1077
+ grid-auto-columns:1fr;
1078
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1079
+ -webkit-user-select:none;
1080
+ -moz-user-select:none;
1081
+ user-select:none;
1082
+ }
1389
1083
 
1390
- .tds-select :is(select,button){
1391
- position:relative;
1392
- place-items:center;
1393
- inline-size:100%;
1394
- min-block-size:var(--tds-select-min-height);
1395
- padding-block:var(--tds-select-padding-block);
1396
- padding-inline:var(--t-spacing-1);
1397
- padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
1398
- font-family:inherit;
1399
- font-size:var(--tds-select-font-size);
1400
- line-height:1;
1401
- color:var(--tds-select-color);
1402
- text-align:left;
1084
+ .tds-toggle-switch input[type="checkbox"]{
1085
+ position:absolute;
1086
+ width:var(--tds-toggle-switch-track-width);
1087
+ height:var(--tds-toggle-switch-track-height);
1088
+ margin:0;
1403
1089
  -webkit-appearance:none;
1404
1090
  -moz-appearance:none;
1405
1091
  appearance:none;
1406
- cursor:var(--tds-select-cursor, default);
1407
- outline:var(--t-focus-ring-width) solid transparent;
1408
- outline-offset:0;
1409
- background-color:var(--tds-select-background-color);
1410
- background-image:var(--tds-select-background-image);
1411
- background-repeat:no-repeat;
1412
- background-position:right var(--tds-select-caret-inline-offset) top 50%;
1413
- background-size:var(--tds-select-caret-size);
1414
- border:var(--t-form-border-width) solid var(--tds-select-border-color);
1415
- border-radius:var(--t-form-border-radius);
1416
- transition-timing-function:var(--t-ease-in-out);
1417
- transition-duration:var(--t-duration-300);
1418
- transition-property:var(--tds-select-transition-property);
1419
- }
1420
-
1421
- :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
1422
- border-color:var(--tds-select-border-color-hover);
1423
- }
1424
-
1425
- :is(.tds-select :is(select,button)):focus{
1426
- outline-color:var(--t-focus-ring-color);
1427
- outline-offset:var(--t-focus-ring-offset);
1428
- border-color:var(--tds-select-border-color-active);
1429
- }
1430
-
1431
- :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
1432
- color:var(--tds-select-placeholder-color);
1433
- }
1434
-
1435
- .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
1436
- --tds-select-border-color:var(--t-form-border-color-error);
1437
- --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
1438
- --tds-select-border-color-active:var(--t-form-border-color-error-hover);
1439
- --tds-select-background-color:var(--t-form-background-color-error);
1440
- --tds-select-description-color:var(--t-text-color-status-error);
1441
- --tds-select-description-invalid-icon-display:inline-block;
1092
+ cursor:var(--tds-toggle-switch-cursor);
1093
+ outline:var(--tds-toggle-switch-track-outline);
1094
+ outline-offset:var(--t-focus-ring-offset);
1095
+ background-color:transparent;
1096
+ border:0;
1097
+ border-radius:var(--t-border-radius-round);
1442
1098
  }
1443
1099
 
1444
- .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1445
- margin-left:.25ch;
1446
- color:var(--t-text-color-status-error);
1447
- content:"*";
1100
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1101
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1448
1102
  }
1449
1103
 
1450
- .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
1451
- --tds-select-border-color:var(--t-form-border-color-disabled);
1452
- --tds-select-background-color:var(--t-form-background-color-disabled);
1453
- --tds-select-color:var(--t-form-color-disabled);
1454
- --tds-select-cursor:not-allowed;
1455
- }
1456
-
1457
- .tds-select:has( > [popover]:popover-open) > button{
1458
- border-color:var(--tds-select-border-color-active);
1104
+ .tds-toggle-switch label{
1105
+ display:inline-flex;
1106
+ grid-area:1 / 2;
1107
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1108
+ column-gap:var(--tds-toggle-switch-column-gap);
1109
+ margin-top:-.09375em;
1110
+ font-size:var(--tds-toggle-switch-font-size);
1111
+ font-weight:var(--t-font-weight-normal);
1112
+ line-height:var(--tds-toggle-switch-line-height);
1113
+ color:var(--tds-toggle-switch-label-color);
1114
+ cursor:var(--tds-toggle-switch-cursor);
1459
1115
  }
1460
1116
 
1461
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1462
- transform:rotate(.5turn);
1463
- }
1464
-
1465
- .tds-select :is(hr,li[role="separator"]){
1466
- margin-block:var(--t-spacing-half);
1467
- color:var(--tds-select-border-color);
1468
- border:0;
1469
- border-top:1px solid;
1117
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1118
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1470
1119
  }
1471
1120
 
1472
- .tds-select :is(li[role="option"],option:not([hidden])){
1473
- display:block;
1474
- padding-block:var(--tds-select-option-padding-block);
1475
- padding-inline:var(--tds-select-option-padding-inline);
1476
- overflow:hidden;
1477
- text-overflow:ellipsis;
1478
- font-size:var(--tds-select-option-font-size);
1479
- color:var(--tds-select-option-color);
1480
- white-space:nowrap;
1481
- cursor:default;
1482
- border-radius:var(--tds-select-option-border-radius);
1121
+ .tds-toggle-switch:has(input:checked){
1122
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1123
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1483
1124
  }
1484
1125
 
1485
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1486
- outline:none;
1487
- }
1488
-
1489
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1490
- background:var(--tds-select-option-background-hover);
1491
- }
1492
-
1493
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1494
- background:var(--tds-select-option-background-active);
1495
- }
1496
-
1497
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1498
- color:var(--t-form-color-disabled);
1499
- cursor:not-allowed;
1126
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1127
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1500
1128
  }
1501
1129
 
1502
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1503
- background:transparent;
1504
- }
1505
-
1506
- .tds-select :is(li[role="presentation"],legend){
1507
- position:sticky;
1508
- inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1509
- z-index:1;
1510
- float:inline-start;
1511
- inline-size:100%;
1512
- padding-block:var(--tds-select-group-label-padding-block);
1513
- padding-inline:var(--tds-select-group-label-padding-inline);
1514
- container-type:scroll-state;
1515
- font-size:var(--tds-select-group-label-font-size);
1516
- font-weight:var(--tds-select-group-label-font-weight);
1517
- letter-spacing:var(--tds-select-group-label-letter-spacing);
1518
- background:var(--tds-select-group-label-background);
1519
- text-box:trim-both cap alphabetic;
1130
+ .tds-toggle-switch:has(input:disabled){
1131
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1132
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1133
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1134
+ --tds-toggle-switch-cursor:not-allowed;
1520
1135
  }
1521
1136
 
1522
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1523
- display:inline-flex;
1524
- gap:var(--t-spacing-half);
1525
- align-items:center;
1526
- color:var(--tds-select-group-label-color);
1527
- transition:var(--tds-select-group-label-transition);
1528
- }
1529
-
1530
- @container scroll-state(stuck){
1531
-
1532
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1533
- color:var(--tds-select-group-label-color-stuck);
1534
- }
1535
-
1536
- @media (forced-colors: active){
1537
-
1538
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1539
- color:var(--tds-select-group-label-color-stuck);
1540
- }
1541
- }
1542
- }
1137
+ .tds-toggle-switch-track{
1138
+ position:relative;
1139
+ flex-shrink:0;
1140
+ width:var(--tds-toggle-switch-track-width);
1141
+ height:var(--tds-toggle-switch-track-height);
1142
+ background-color:var(--tds-toggle-switch-track-background-color);
1143
+ border-radius:var(--t-border-radius-round);
1144
+ transition:var(--tds-toggle-switch-track-transition);
1145
+ }
1543
1146
 
1544
- .tds-select.tds-select--lg{
1545
- --tds-select-min-height:var(--t-container-size-lg);
1546
- --tds-select-font-size:var(--t-font-size-lg);
1147
+ .tds-toggle-switch-track::before{
1148
+ position:absolute;
1149
+ top:var(--t-spacing-fourth);
1150
+ left:var(--t-spacing-fourth);
1151
+ width:var(--tds-toggle-switch-thumb-size);
1152
+ height:var(--tds-toggle-switch-thumb-size);
1153
+ content:"";
1154
+ background-color:#fff;
1155
+ border-radius:var(--t-border-radius-round);
1156
+ transform:var(--tds-toggle-switch-thumb-transform);
1157
+ transition:var(--tds-toggle-switch-thumb-transition);
1547
1158
  }
1548
1159
 
1549
1160
  @media (prefers-reduced-motion: reduce){
1550
1161
 
1551
- .tds-select{
1552
- --tds-select-transition-property:none;
1553
- --tds-select-dropdown-transition:none;
1554
- --tds-select-dropdown-scroll-behavior:auto;
1555
- --tds-select-dropdown-closed-translate:none;
1556
- --tds-select-dropdown-open-translate:none;
1557
- --tds-select-caret-transition:none;
1162
+ .tds-toggle-switch-track{
1163
+ --tds-toggle-switch-track-transition:none;
1164
+ --tds-toggle-switch-thumb-transition:none;
1558
1165
  }
1559
1166
  }
1560
1167
 
1561
- .tds-select-description{
1168
+ .tds-toggle-switch-description{
1562
1169
  display:flex;
1563
- gap:var(--t-spacing-half);
1170
+ grid-area:2 / 2;
1564
1171
  align-items:flex-start;
1565
1172
  margin:0;
1566
- font-size:var(--t-font-size-sm);
1567
- line-height:1.35;
1568
- color:var(--tds-select-description-color, var(--t-text-color-secondary));
1173
+ font-size:var(--tds-toggle-switch-description-font-size);
1174
+ line-height:var(--tds-toggle-switch-description-line-height);
1175
+ color:var(--tds-toggle-switch-description-color);
1569
1176
  cursor:text;
1570
1177
  }
1571
1178
 
1572
- .tds-select-description .tds-select-description-invalid-icon{
1573
- display:var(--tds-select-description-invalid-icon-display, none);
1574
- flex-shrink:0;
1575
- margin-block-start:calc(.5lh - .5em);
1576
- line-height:1.35;
1577
- }
1179
+ .tds-toggle-switch--sm{
1180
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1181
+ --tds-toggle-switch-line-height:1.35;
1182
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1183
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1184
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1185
+ --tds-toggle-switch-description-line-height:1.3;
1186
+ }
1578
1187
 
1579
- .tds-select > .tds-select-hidden-select{
1580
- position:absolute;
1581
- inline-size:1px;
1582
- block-size:1px;
1583
- padding:0;
1584
- margin:0;
1585
- pointer-events:none;
1586
- opacity:0;
1188
+ .tds-toggle-switch--hide-label{
1189
+ --tds-toggle-switch-display:inline-flex;
1587
1190
  }
1588
1191
 
1589
- .tds-select:has( > button) > button{
1590
- display:block;
1591
- padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1592
- overflow:hidden;
1593
- text-overflow:ellipsis;
1594
- color:var(--tds-select-placeholder-color);
1595
- white-space:nowrap;
1596
- background-image:none;
1597
- anchor-name:--tds-select-anchor;
1598
- 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);
1599
- -webkit-tap-highlight-color:transparent;
1600
- }
1601
-
1602
- :is(.tds-select:has( > button) > button)::after{
1603
- position:absolute;
1604
- inset-block:0;
1605
- inset-inline-end:var(--tds-select-caret-inline-offset);
1606
- width:var(--tds-select-caret-size);
1607
- height:var(--tds-select-caret-size);
1608
- margin-block:auto;
1609
- pointer-events:none;
1610
- content:var(--tds-select-background-image);
1611
- transform:rotate(0);
1612
- transition:var(--tds-select-caret-transition);
1613
- }
1192
+ .tds-radio{
1193
+ --tds-radio-font-size:var(--t-font-size-md);
1194
+ --tds-radio-cursor:pointer;
1195
+ --tds-radio-line-height:1.4;
1196
+ --tds-radio-transition-property:border-width;
1614
1197
 
1615
- .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1616
- color:var(--tds-select-color);
1617
- }
1198
+ --tds-radio-input-size:var(--t-element-size-md);
1199
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1200
+ --tds-radio-input-border-color:var(--t-form-border-color);
1201
+ --tds-radio-input-border-width:var(--t-form-border-width);
1202
+ --tds-radio-input-background-color:transparent;
1618
1203
 
1619
- .tds-select:has( > button) [popover]{
1620
- position-anchor:--tds-select-anchor;
1621
- inset:auto;
1622
- inline-size:-moz-max-content;
1623
- inline-size:max-content;
1624
- min-inline-size:anchor-size(width);
1625
- max-inline-size:100vi;
1626
- max-block-size:min(50vh, 20rem);
1627
- padding:var(--tds-select-dropdown-padding);
1628
- margin-block:var(--tds-select-dropdown-margin-block);
1629
- position-area:block-end span-inline-start;
1630
- position-try-fallbacks:flip-block, flip-inline;
1631
- overflow:auto;
1632
- overflow-x:hidden;
1633
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1634
- overscroll-behavior:none;
1635
- -webkit-user-select:none;
1636
- -moz-user-select:none;
1637
- user-select:none;
1638
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1639
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1640
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1641
- background:var(--tds-select-dropdown-background-color);
1642
- border:var(--tds-select-dropdown-border);
1643
- border-radius:var(--tds-select-dropdown-border-radius);
1644
- box-shadow:var(--tds-select-dropdown-box-shadow);
1645
- opacity:var(--tds-select-dropdown-open-opacity);
1646
- translate:var(--tds-select-dropdown-open-translate);
1647
- transition:var(--tds-select-dropdown-transition);
1648
- }
1204
+ --tds-radio-label-color:var(--t-form-color);
1649
1205
 
1650
- :is(.tds-select:has( > button) [popover]):not(:popover-open){
1651
- opacity:var(--tds-select-dropdown-closed-opacity);
1652
- translate:var(--tds-select-dropdown-closed-translate);
1653
- }
1206
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1207
+ --tds-radio-description-line-height:1.35;
1208
+ --tds-radio-description-color:var(--t-text-color-secondary);
1654
1209
 
1655
- :is(.tds-select:has( > button) [popover]) ul{
1656
- padding:0;
1657
- margin:0;
1658
- list-style:none;
1659
- }
1210
+ position:relative;
1211
+ display:inline-grid;
1212
+ grid-template-columns:auto;
1213
+ grid-auto-columns:1fr;
1214
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
1215
+ line-height:var(--tds-radio-line-height);
1216
+ cursor:var(--tds-radio-cursor);
1217
+ -webkit-user-select:none;
1218
+ -moz-user-select:none;
1219
+ user-select:none;
1220
+ }
1660
1221
 
1661
- @starting-style{
1662
- :is(.tds-select:has( > button) [popover]):popover-open{
1663
- opacity:var(--tds-select-dropdown-closed-opacity);
1664
- translate:var(--tds-select-dropdown-closed-translate);
1665
- }
1666
- }
1222
+ .tds-radio label{
1223
+ grid-area:1 / 2;
1224
+ font-size:var(--tds-radio-font-size);
1225
+ font-weight:var(--t-font-weight-normal);
1226
+ color:var(--tds-radio-label-color);
1227
+ cursor:var(--tds-radio-cursor);
1228
+ }
1667
1229
 
1668
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1669
- .tds-select select:has(> button){
1670
- padding-inline-end:0;
1671
- background-image:none;
1230
+ .tds-radio input[type="radio"]{
1231
+ position:relative;
1232
+ width:1em;
1233
+ height:1em;
1234
+ margin:calc((1lh - 1em) / 2) 0 0;
1235
+ font-size:var(--tds-radio-font-size);
1236
+ line-height:inherit;
1237
+ -webkit-appearance:none;
1238
+ -moz-appearance:none;
1239
+ appearance:none;
1240
+ cursor:var(--tds-radio-cursor);
1241
+ background-color:var(--tds-radio-input-background-color);
1242
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1243
+ border-radius:var(--tds-radio-input-border-radius);
1244
+ transition-timing-function:var(--t-ease-in-out);
1245
+ transition-duration:var(--t-duration-200);
1246
+ transition-property:var(--tds-radio-transition-property);
1672
1247
  }
1673
- @media (hover) and (pointer: fine){
1674
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1675
- padding-block:0;
1676
- -webkit-appearance:base-select;
1677
- -moz-appearance:base-select;
1678
- appearance:base-select;
1679
- }
1680
- }
1681
- :is(.tds-select select:has( > button))::picker-icon{
1682
- flex-shrink:0;
1683
- width:var(--tds-select-caret-size);
1684
- height:var(--tds-select-caret-size);
1685
- margin-inline-end:var(--tds-select-caret-inline-offset);
1686
- content:var(--tds-select-background-image);
1687
- transition:var(--tds-select-caret-transition);
1688
- }
1689
1248
 
1690
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1691
- opacity:var(--tds-select-dropdown-closed-opacity);
1692
- translate:var(--tds-select-dropdown-closed-translate);
1249
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1250
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1251
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1693
1252
  }
1694
1253
 
1695
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1696
- outline-color:var(--t-focus-ring-color);
1254
+ :is(.tds-radio input[type="radio"]):focus-visible{
1255
+ outline:var(--t-focus-ring-outline);
1697
1256
  outline-offset:var(--t-focus-ring-offset);
1698
- border-color:var(--tds-select-border-color-active);
1699
1257
  }
1700
1258
 
1701
- :is(.tds-select select:has( > button)):open::picker-icon{
1702
- opacity:1;
1703
- transform:rotate(.5turn);
1259
+ :is(.tds-radio input[type="radio"]):disabled{
1260
+ pointer-events:none;
1704
1261
  }
1705
1262
 
1706
- :is(.tds-select select:has( > button)) selectedcontent{
1707
- overflow:hidden;
1708
- text-overflow:ellipsis;
1709
- line-height:calc(var(--tds-select-min-height) - 2px);
1710
- white-space:nowrap;
1711
- }
1263
+ @media (prefers-reduced-motion: reduce){
1712
1264
 
1713
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1714
- color:var(--tds-select-placeholder-color);
1265
+ .tds-radio input[type="radio"]{
1266
+ --tds-radio-transition-property:none;
1267
+ }
1715
1268
  }
1716
1269
 
1717
- :is(.tds-select select:has( > button))::picker(select){
1718
- inset:auto;
1719
- inline-size:-moz-max-content;
1720
- inline-size:max-content;
1721
- min-inline-size:anchor-size(width);
1722
- max-inline-size:100vi;
1723
- padding:var(--tds-select-dropdown-padding);
1724
- margin-block:var(--tds-select-dropdown-margin-block);
1725
- position-try-fallbacks:flip-block, flip-inline;
1726
- overflow:auto;
1727
- overflow-x:hidden;
1728
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1729
- overscroll-behavior:none;
1730
- -webkit-user-select:none;
1731
- -moz-user-select:none;
1732
- user-select:none;
1733
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1734
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1735
- background:var(--tds-select-dropdown-background-color);
1736
- border:var(--tds-select-dropdown-border);
1737
- border-radius:var(--tds-select-dropdown-border-radius);
1738
- box-shadow:var(--tds-select-dropdown-box-shadow);
1739
- opacity:var(--tds-select-dropdown-open-opacity);
1740
- translate:var(--tds-select-dropdown-open-translate);
1741
- transition:var(--tds-select-dropdown-transition);
1742
- }
1270
+ .tds-radio:has(input:checked){
1271
+ --tds-radio-input-background-color:var(--t-form-background-color);
1272
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1273
+ --tds-radio-input-border-width:4px;
1274
+ }
1743
1275
 
1744
- :is(.tds-select select:has( > button)) option::checkmark{
1745
- display:none;
1276
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1277
+ --tds-radio-input-background-color:var(--t-form-background-color);
1278
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1746
1279
  }
1747
1280
 
1748
- @starting-style{
1749
- :is(.tds-select select:has( > button))::picker(select):popover-open{
1750
- opacity:var(--tds-select-dropdown-closed-opacity);
1751
- translate:var(--tds-select-dropdown-closed-translate);
1752
- }
1281
+ .tds-radio:has(input:user-invalid){
1282
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1283
+ }
1284
+
1285
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1286
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1287
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1753
1288
  }
1754
- }
1755
1289
 
1756
- .tds-input{
1757
- --tds-input-border-color:var(--t-form-border-color);
1758
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
1759
- --tds-input-background-color:var(--t-form-background-color);
1760
- --tds-input-color:var(--t-form-color);
1761
- --tds-input-font-size:var(--t-font-size-md);
1762
- --tds-input-description-color:var(--t-text-color-secondary);
1763
- --tds-input-description-invalid-icon-display:none;
1764
- --tds-input-min-height:var(--t-container-size-md);
1765
- --tds-input-padding-inline:var(--t-spacing-1);
1290
+ .tds-radio:has(input:disabled){
1291
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1292
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1766
1293
 
1767
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
1294
+ --tds-radio-label-color:var(--t-form-color-disabled);
1295
+ --tds-radio-description-color:var(--t-form-color-disabled);
1296
+ --tds-radio-cursor:not-allowed;
1297
+ }
1298
+
1299
+ .tds-radio:has(input:disabled) input:checked{
1300
+ --tds-radio-input-background-color:var(--t-form-background-color);
1301
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1302
+ }
1768
1303
 
1304
+ .tds-radio-description{
1769
1305
  display:flex;
1770
- flex-direction:column;
1306
+ grid-area:2 / 2;
1771
1307
  gap:var(--t-spacing-half);
1308
+ align-items:flex-start;
1309
+ margin:0;
1310
+ font-size:var(--tds-radio-description-font-size);
1311
+ line-height:var(--tds-radio-description-line-height);
1312
+ color:var(--tds-radio-description-color);
1313
+ cursor:text;
1772
1314
  }
1773
1315
 
1774
- .tds-input label{
1775
- font-size:var(--t-font-size-md);
1776
- font-weight:var(--t-font-weight-normal);
1777
- color:var(--t-text-color);
1778
- }
1779
-
1780
- .tds-input :is(input,textarea){
1781
- inline-size:100%;
1782
- block-size:auto;
1783
- min-block-size:var(--tds-input-min-height);
1784
- padding-block:var(--tds-input-padding-block);
1785
- padding-inline:var(--tds-input-padding-inline);
1316
+ .tds-radio--sm{
1317
+ --tds-radio-line-height:1.35;
1318
+ --tds-radio-input-size:var(--t-element-size-sm);
1319
+ --tds-radio-font-size:var(--t-font-size-sm);
1320
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1321
+ --tds-radio-description-line-height:1.3;
1322
+ }
1323
+
1324
+ .tds-select{
1325
+ --tds-select-border-color:var(--t-form-border-color);
1326
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
1327
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
1328
+ --tds-select-background-color:var(--t-form-background-color);
1329
+ --tds-select-color:var(--t-form-color);
1330
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
1331
+ --tds-select-font-size:var(--t-font-size-md);
1332
+ --tds-select-min-height:var(--t-container-size-md);
1333
+ --tds-select-padding-block:6px;
1334
+ --tds-select-description-color:var(--t-text-color-secondary);
1335
+ --tds-select-description-invalid-icon-display:none;
1336
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1337
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1338
+ --tds-select-caret-size:1em;
1339
+ --tds-select-caret-inline-offset:.75em;
1340
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1341
+
1342
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
1343
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
1344
+ --tds-select-dropdown-padding:var(--t-spacing-1);
1345
+ --tds-select-dropdown-margin-block:5px;
1346
+ --tds-select-dropdown-scrollbar-color:#0004 #0000;
1347
+ --tds-select-dropdown-scrollbar-width:thin;
1348
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
1349
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1350
+ --tds-select-dropdown-scroll-behavior:smooth;
1351
+ --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;
1352
+ --tds-select-dropdown-closed-opacity:0;
1353
+ --tds-select-dropdown-open-opacity:1;
1354
+ --tds-select-dropdown-closed-translate:0 -8px;
1355
+ --tds-select-dropdown-open-translate:0 0;
1356
+
1357
+ --tds-select-option-gap:var(--t-spacing-1);
1358
+ --tds-select-option-padding-block:var(--t-spacing-1);
1359
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1360
+ --tds-select-option-font-size:1rem;
1361
+ --tds-select-option-color:var(--t-text-color);
1362
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1363
+ --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1364
+ --tds-select-option-border-radius:var(--t-border-radius);
1365
+
1366
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1367
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1368
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
1369
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
1370
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1371
+ --tds-select-group-label-letter-spacing:0;
1372
+ --tds-select-group-label-color:var(--t-text-color-secondary);
1373
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1374
+ --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1375
+ --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
1376
+
1377
+ position:relative;
1378
+ display:flex;
1379
+ flex-direction:column;
1380
+ gap:var(--t-spacing-half);
1381
+ }
1382
+
1383
+ .tds-select :is(label,.tds-select-label){
1384
+ font-size:var(--t-font-size-md);
1385
+ font-weight:var(--t-font-weight-normal);
1386
+ color:var(--t-text-color);
1387
+ cursor:default;
1388
+ }
1389
+
1390
+ .tds-select :is(select,button){
1391
+ position:relative;
1392
+ place-items:center;
1393
+ inline-size:100%;
1394
+ min-block-size:var(--tds-select-min-height);
1395
+ padding-block:var(--tds-select-padding-block);
1396
+ padding-inline:var(--t-spacing-1);
1397
+ padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
1786
1398
  font-family:inherit;
1787
- font-size:var(--tds-input-font-size);
1788
- color:var(--tds-input-color);
1399
+ font-size:var(--tds-select-font-size);
1400
+ line-height:1;
1401
+ color:var(--tds-select-color);
1402
+ text-align:left;
1789
1403
  -webkit-appearance:none;
1790
1404
  -moz-appearance:none;
1791
1405
  appearance:none;
1406
+ cursor:var(--tds-select-cursor, default);
1792
1407
  outline:var(--t-focus-ring-width) solid transparent;
1793
1408
  outline-offset:0;
1794
- background-color:var(--tds-input-background-color);
1795
- border:var(--t-form-border-width) solid var(--tds-input-border-color);
1409
+ background-color:var(--tds-select-background-color);
1410
+ background-image:var(--tds-select-background-image);
1411
+ background-repeat:no-repeat;
1412
+ background-position:right var(--tds-select-caret-inline-offset) top 50%;
1413
+ background-size:var(--tds-select-caret-size);
1414
+ border:var(--t-form-border-width) solid var(--tds-select-border-color);
1796
1415
  border-radius:var(--t-form-border-radius);
1797
1416
  transition-timing-function:var(--t-ease-in-out);
1798
- transition-duration:var(--t-duration-200);
1799
- transition-property:var(--tds-input-transition-property);
1417
+ transition-duration:var(--t-duration-300);
1418
+ transition-property:var(--tds-select-transition-property);
1800
1419
  }
1801
1420
 
1802
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
1803
- border-color:var(--tds-input-border-color-hover);
1804
- }
1805
-
1806
- :is(.tds-input :is(input,textarea)):focus{
1807
- outline-color:transparent;
1421
+ :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
1422
+ border-color:var(--tds-select-border-color-hover);
1808
1423
  }
1809
1424
 
1810
- :is(.tds-input :is(input,textarea)):focus-visible{
1425
+ :is(.tds-select :is(select,button)):focus{
1811
1426
  outline-color:var(--t-focus-ring-color);
1812
1427
  outline-offset:var(--t-focus-ring-offset);
1813
- border-color:var(--t-form-border-color-focus);
1814
- }
1815
-
1816
- :is(.tds-input :is(input,textarea))::-moz-placeholder{
1817
- color:var(--t-form-placeholder-color);
1818
- -moz-user-select:none;
1819
- user-select:none;
1820
- }
1821
-
1822
- :is(.tds-input :is(input,textarea))::placeholder{
1823
- color:var(--t-form-placeholder-color);
1824
- -webkit-user-select:none;
1825
- -moz-user-select:none;
1826
- user-select:none;
1428
+ border-color:var(--tds-select-border-color-active);
1827
1429
  }
1828
1430
 
1829
- @media (prefers-reduced-motion: reduce){
1830
-
1831
- .tds-input :is(input,textarea){
1832
- --tds-input-transition-property:none;
1833
- }
1431
+ :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
1432
+ color:var(--tds-select-placeholder-color);
1834
1433
  }
1835
1434
 
1836
- .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
1837
- --tds-input-background-color:var(--t-form-background-color-error);
1838
- --tds-input-border-color:var(--t-form-border-color-error);
1839
- --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
1840
- --tds-input-description-color:var(--t-text-color-status-error);
1841
- --tds-input-description-invalid-icon-display:inline-block;
1435
+ .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
1436
+ --tds-select-border-color:var(--t-form-border-color-error);
1437
+ --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
1438
+ --tds-select-border-color-active:var(--t-form-border-color-error-hover);
1439
+ --tds-select-background-color:var(--t-form-background-color-error);
1440
+ --tds-select-description-color:var(--t-text-color-status-error);
1441
+ --tds-select-description-invalid-icon-display:inline-block;
1842
1442
  }
1843
1443
 
1844
- .tds-input:has(:is(input,textarea):required) label::after{
1444
+ .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1845
1445
  margin-left:.25ch;
1846
1446
  color:var(--t-text-color-status-error);
1847
1447
  content:"*";
1848
1448
  }
1849
1449
 
1850
- .tds-input:where(:has(:is(input,textarea):disabled)){
1851
- --tds-input-border-color:var(--t-form-border-color-disabled);
1852
- --tds-input-background-color:var(--t-form-background-color-disabled);
1853
- --tds-input-color:var(--t-form-color-disabled);
1450
+ .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
1451
+ --tds-select-border-color:var(--t-form-border-color-disabled);
1452
+ --tds-select-background-color:var(--t-form-background-color-disabled);
1453
+ --tds-select-color:var(--t-form-color-disabled);
1454
+ --tds-select-cursor:not-allowed;
1854
1455
  }
1855
1456
 
1856
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
1857
- cursor:not-allowed;
1858
- }
1859
-
1860
- .tds-input:where(:has(:is(input,textarea)[readonly])){
1861
- --tds-input-border-color:var(--t-form-border-color-readonly);
1862
- --tds-input-background-color:var(--t-form-background-color-readonly);
1457
+ .tds-select:has( > [popover]:popover-open) > button{
1458
+ border-color:var(--tds-select-border-color-active);
1863
1459
  }
1864
1460
 
1865
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
1866
- border-color:var(--tds-input-border-color-hover);
1461
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1462
+ transform:rotate(.5turn);
1867
1463
  }
1868
1464
 
1869
- .tds-input.tds-input--lg{
1870
- --tds-input-min-height:var(--t-container-size-lg);
1871
- --tds-input-font-size:var(--t-font-size-lg);
1465
+ .tds-select :is(hr,li[role="separator"]){
1466
+ margin-block:var(--t-spacing-half);
1467
+ color:var(--tds-select-border-color);
1468
+ border:0;
1469
+ border-top:1px solid;
1872
1470
  }
1873
1471
 
1874
- .tds-input-description{
1875
- display:flex;
1876
- gap:var(--t-spacing-half);
1877
- align-items:flex-start;
1878
- margin:0;
1879
- font-size:var(--t-font-size-sm);
1880
- line-height:1.35;
1881
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
1882
- cursor:text;
1883
- }
1884
-
1885
- .tds-input-description .tds-input-description-invalid-icon{
1886
- display:var(--tds-input-description-invalid-icon-display, none);
1887
- flex-shrink:0;
1888
- margin-block-start:calc(.5lh - .5em);
1889
- line-height:1.35;
1472
+ .tds-select :is(li[role="option"],option:not([hidden])){
1473
+ display:block;
1474
+ padding-block:var(--tds-select-option-padding-block);
1475
+ padding-inline:var(--tds-select-option-padding-inline);
1476
+ overflow:hidden;
1477
+ text-overflow:ellipsis;
1478
+ font-size:var(--tds-select-option-font-size);
1479
+ color:var(--tds-select-option-color);
1480
+ white-space:nowrap;
1481
+ cursor:default;
1482
+ border-radius:var(--tds-select-option-border-radius);
1890
1483
  }
1891
1484
 
1892
- .tds-loading-spinner{
1893
- --tds-loading-spinner-size:1.25em;
1894
-
1895
- position:absolute;
1896
- right:0;
1897
- left:0;
1898
- visibility:var(--tds-loading-spinner-visibility, hidden);
1899
- width:var(--tds-loading-spinner-size);
1900
- height:var(--tds-loading-spinner-size);
1901
- margin:auto;
1902
- border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
1903
- border-top-color:var(--tds-loading-spinner-color, currentcolor);
1904
- border-radius:50%;
1905
- animation:spinner-rotate 500ms infinite linear;
1906
- animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
1907
- }
1485
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1486
+ outline:none;
1487
+ }
1908
1488
 
1909
- @keyframes spinner-rotate{
1910
- to{
1911
- transform:rotate(360deg);
1912
- }
1913
- }
1489
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1490
+ background:var(--tds-select-option-background-hover);
1491
+ }
1914
1492
 
1915
- @media (prefers-reduced-motion: reduce){
1916
- [class*="--loading"] .tds-loading-spinner{
1917
- --tds-loading-spinner-animation-play-state:paused;
1918
- }
1919
- }
1493
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1494
+ background:var(--tds-select-option-background-active);
1495
+ }
1920
1496
 
1921
- .symbol{
1922
- display:inline-block;
1923
- vertical-align:text-top;
1924
- fill:currentColor;
1925
- height:1em;
1926
- width:1em;
1927
- }
1497
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1498
+ color:var(--t-form-color-disabled);
1499
+ cursor:not-allowed;
1500
+ }
1928
1501
 
1929
- .tds-btn{
1930
- --tds-btn-padding-x:12px;
1931
- --tds-btn-padding-truncated-x:8px;
1932
- --tds-btn-padding-y:3px;
1933
- --tds-btn-font-size:16px;
1934
- --tds-btn-font-weight:400;
1935
- --tds-btn-line-height:1.5;
1936
- --tds-btn-color:var(--t-text-color-headline);
1937
- --tds-btn-bg:transparent;
1938
- --tds-btn-border-width:var(--t-border-width);
1939
- --tds-btn-border-color:transparent;
1940
- --tds-btn-border-radius:var(--t-border-radius-md);
1941
- --tds-btn-border-color-hover:transparent;
1942
- --tds-btn-disabled-opacity:1;
1943
- --tds-btn-min-height:32px;
1944
- --tds-btn-text-decoration:none;
1945
- --tds-btn-attention-icon-size:1em;
1946
- display:inline-flex;
1947
- gap:1ex;
1948
- align-items:center;
1949
- justify-content:center;
1950
- width:auto;
1951
- min-height:var(--tds-btn-min-height);
1952
- padding:var(--tds-btn-padding-y) var(--tds-btn-padding-x);
1953
- font-size:var(--tds-btn-font-size);
1954
- font-weight:var(--tds-btn-font-weight);
1955
- line-height:var(--tds-btn-line-height);
1956
- vertical-align:middle;
1957
- color:var(--tds-btn-color);
1958
- text-align:center;
1959
- -webkit-text-decoration:var(--tds-btn-text-decoration);
1960
- text-decoration:var(--tds-btn-text-decoration);
1961
- cursor:pointer;
1962
- -webkit-user-select:none;
1963
- -moz-user-select:none;
1964
- user-select:none;
1965
- background-color:var(--tds-btn-bg);
1966
- background-clip:padding-box;
1967
- border:var(--tds-btn-border-width) solid var(--tds-btn-border-color);
1968
- border-radius:var(--tds-btn-border-radius);
1969
- transition-timing-function:var(--t-ease-in-out);
1970
- transition-duration:var(--t-duration-200);
1971
- transition-property:color, background-color, border-color, box-shadow, fill, stroke, opacity;
1972
- }
1973
-
1974
- .tds-btn:where(.tds-btn--icononly,:has(.prefix,svg:not(.suffix))){
1975
- padding-left:var(--tds-btn-padding-truncated-x);
1976
- }
1502
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1503
+ background:transparent;
1504
+ }
1977
1505
 
1978
- .tds-btn:where(.tds-btn--icononly,:has(.suffix,svg:not(.prefix))){
1979
- padding-right:var(--tds-btn-padding-truncated-x);
1506
+ .tds-select :is(li[role="presentation"],legend){
1507
+ position:sticky;
1508
+ inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1509
+ z-index:1;
1510
+ float:inline-start;
1511
+ inline-size:100%;
1512
+ padding-block:var(--tds-select-group-label-padding-block);
1513
+ padding-inline:var(--tds-select-group-label-padding-inline);
1514
+ container-type:scroll-state;
1515
+ font-size:var(--tds-select-group-label-font-size);
1516
+ font-weight:var(--tds-select-group-label-font-weight);
1517
+ letter-spacing:var(--tds-select-group-label-letter-spacing);
1518
+ background:var(--tds-select-group-label-background);
1519
+ text-box:trim-both cap alphabetic;
1980
1520
  }
1981
1521
 
1982
- .tds-btn:hover{
1983
- color:var(--tds-btn-color-hover);
1984
- background-color:var(--tds-btn-bg-hover);
1985
- border-color:var(--tds-btn-border-color-hover);
1986
- }
1522
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1523
+ display:inline-flex;
1524
+ gap:var(--t-spacing-half);
1525
+ align-items:center;
1526
+ color:var(--tds-select-group-label-color);
1527
+ transition:var(--tds-select-group-label-transition);
1528
+ }
1987
1529
 
1988
- .tds-btn:focus-visible{
1989
- color:var(--tds-btn-color-hover);
1990
- outline:var(--t-focus-ring-outline);
1991
- outline-offset:var(--t-focus-ring-offset);
1992
- background-color:var(--tds-btn-bg-hover);
1993
- border-color:var(--tds-btn-border-color-hover);
1994
- }
1530
+ @container scroll-state(stuck){
1995
1531
 
1996
- .tds-btn:active,.tds-btn.active{
1997
- color:var(--tds-btn-color-active);
1998
- background-color:var(--tds-btn-bg-active);
1999
- border-color:var(--tds-btn-border-color-active);
2000
- }
1532
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1533
+ color:var(--tds-select-group-label-color-stuck);
1534
+ }
2001
1535
 
2002
- .tds-btn:disabled,.tds-btn.disabled{
2003
- --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-dark-020);
2004
- --tds-btn-loading-spinner-color:var(--t-text-color-status-neutral);
2005
- color:var(--tds-btn-color-disabled);
2006
- pointer-events:none;
2007
- background-color:var(--tds-btn-bg-disabled);
2008
- border-color:var(--tds-btn-border-color-disabled);
2009
- opacity:var(--tds-btn-disabled-opacity);
2010
- }
1536
+ @media (forced-colors: active){
2011
1537
 
2012
- .tds-btn svg:not(.symbol){
2013
- display:block;
2014
- width:.66666667lh;
2015
- height:.66666667lh;
2016
- color:var(--tds-btn-icon-color, currentColor);
2017
- }
1538
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1539
+ color:var(--tds-select-group-label-color-stuck);
1540
+ }
1541
+ }
1542
+ }
2018
1543
 
2019
- .tds-btn .tds-loading-spinner{
2020
- --tds-loading-spinner-track-color:var(--tds-btn-loading-spinner-track-color);
2021
- --tds-loading-spinner-track-width:var(--tds-btn-loading-spinner-track-width);
2022
- --tds-loading-spinner-color:var(--tds-btn-loading-spinner-color);
2023
- --tds-loading-spinner-visibility:var(--tds-btn-loading-spinner-visibility);
2024
- --tds-loading-spinner-animation-play-state:var(--tds-btn-loading-spinner-animation-play-state);
1544
+ .tds-select.tds-select--lg{
1545
+ --tds-select-min-height:var(--t-container-size-lg);
1546
+ --tds-select-font-size:var(--t-font-size-lg);
2025
1547
  }
2026
1548
 
2027
1549
  @media (prefers-reduced-motion: reduce){
2028
1550
 
2029
- .tds-btn{
2030
- transition:none;
1551
+ .tds-select{
1552
+ --tds-select-transition-property:none;
1553
+ --tds-select-dropdown-transition:none;
1554
+ --tds-select-dropdown-scroll-behavior:auto;
1555
+ --tds-select-dropdown-closed-translate:none;
1556
+ --tds-select-dropdown-open-translate:none;
1557
+ --tds-select-caret-transition:none;
2031
1558
  }
2032
1559
  }
2033
1560
 
2034
- .tds-btn--xl{
2035
- --tds-btn-padding-y:11px;
2036
- --tds-btn-padding-x:18px;
2037
- --tds-btn-padding-truncated-x:12px;
2038
- --tds-btn-min-height:48px;
2039
- }
2040
-
2041
- .tds-btn--lg{
2042
- --tds-btn-padding-y:7px;
2043
- --tds-btn-padding-x:14px;
2044
- --tds-btn-min-height:40px;
1561
+ .tds-select-description{
1562
+ display:flex;
1563
+ gap:var(--t-spacing-half);
1564
+ align-items:flex-start;
1565
+ margin:0;
1566
+ font-size:var(--t-font-size-sm);
1567
+ line-height:1.35;
1568
+ color:var(--tds-select-description-color, var(--t-text-color-secondary));
1569
+ cursor:text;
2045
1570
  }
2046
1571
 
2047
- .tds-btn--sm{
2048
- --tds-btn-padding-y:.5px;
2049
- --tds-btn-padding-x:7px;
2050
- --tds-btn-padding-truncated-x:4px;
2051
- --tds-btn-min-height:24px;
2052
- --tds-btn-font-size:var(--t-font-size-sm);
2053
- --tds-btn-loading-spinner-track-width:3px;
2054
- }
1572
+ .tds-select-description .tds-select-description-invalid-icon{
1573
+ display:var(--tds-select-description-invalid-icon-display, none);
1574
+ flex-shrink:0;
1575
+ margin-block-start:calc(.5lh - .5em);
1576
+ line-height:1.35;
1577
+ }
2055
1578
 
2056
- .tds-btn--xs{
2057
- --tds-btn-padding-y:0;
2058
- --tds-btn-padding-x:5px;
2059
- --tds-btn-padding-truncated-x:5px;
2060
- --tds-btn-min-height:20px;
2061
- --tds-btn-font-size:var(--t-font-size-xs);
2062
- --tds-btn-loading-spinner-track-width:3px;
1579
+ .tds-select > .tds-select-hidden-select{
1580
+ position:absolute;
1581
+ inline-size:1px;
1582
+ block-size:1px;
1583
+ padding:0;
1584
+ margin:0;
1585
+ pointer-events:none;
1586
+ opacity:0;
2063
1587
  }
2064
1588
 
2065
- .tds-btn--neutral{
2066
- --tds-btn-color:var(--t-text-color-status-neutral);
2067
- --tds-btn-bg:var(--t-fill-color-button-neutral-solid);
2068
- --tds-btn-border-color:var(--t-fill-color-button-neutral-solid);
2069
- --tds-btn-color-hover:var(--t-text-color-status-neutral);
2070
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-solid-hover);
2071
- --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-solid-hover);
2072
- --tds-btn-color-active:var(--t-text-color-status-neutral);
2073
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-solid-active);
2074
- --tds-btn-border-color-active:var(--t-fill-color-button-neutral-solid-active);
2075
- --tds-btn-color-disabled:var(--t-text-color-disabled);
2076
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
2077
- --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
2078
- }
1589
+ .tds-select:has( > button) > button{
1590
+ display:block;
1591
+ padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1592
+ overflow:hidden;
1593
+ text-overflow:ellipsis;
1594
+ color:var(--tds-select-placeholder-color);
1595
+ white-space:nowrap;
1596
+ background-image:none;
1597
+ anchor-name:--tds-select-anchor;
1598
+ 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);
1599
+ -webkit-tap-highlight-color:transparent;
1600
+ }
2079
1601
 
2080
- .tds-btn--neutral-inline{
2081
- --tds-btn-color:var(--t-text-color-status-neutral);
2082
- --tds-btn-bg:transparent;
2083
- --tds-btn-border-color:transparent;
2084
- --tds-btn-color-hover:var(--t-text-color-status-neutral);
2085
- --tds-btn-bg-hover:transparent;
2086
- --tds-btn-border-color-hover:transparent;
2087
- --tds-btn-padding-y:0;
2088
- --tds-btn-padding-x:0;
2089
- --tds-btn-min-height:auto;
2090
- --tds-btn-text-decoration:none;
2091
- --tds-btn-border-width:0;
2092
- --tds-btn-font-size:inherit;
2093
- --tds-btn-font-weight:inherit;
2094
- --tds-btn-line-height:inherit;
2095
- font-family:inherit;
2096
- font-style:inherit;
2097
- vertical-align:inherit;
2098
- }
1602
+ :is(.tds-select:has( > button) > button)::after{
1603
+ position:absolute;
1604
+ inset-block:0;
1605
+ inset-inline-end:var(--tds-select-caret-inline-offset);
1606
+ width:var(--tds-select-caret-size);
1607
+ height:var(--tds-select-caret-size);
1608
+ margin-block:auto;
1609
+ pointer-events:none;
1610
+ content:var(--tds-select-background-image);
1611
+ transform:rotate(0);
1612
+ transition:var(--tds-select-caret-transition);
1613
+ }
2099
1614
 
2100
- .tds-btn--neutral-inline:hover,.tds-btn--neutral-inline:focus-visible{
2101
- --tds-btn-text-decoration:underline;
1615
+ .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1616
+ color:var(--tds-select-color);
2102
1617
  }
2103
1618
 
2104
- .tds-btn--interaction{
2105
- --tds-btn-color:var(--t-text-color-inverted);
2106
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
2107
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
2108
- --tds-btn-color-hover:var(--t-text-color-inverted);
2109
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
2110
- --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
2111
- --tds-btn-color-active:var(--t-text-color-inverted);
2112
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
2113
- --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
2114
- --tds-btn-color-disabled:var(--t-text-color-disabled);
2115
- --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
2116
- --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1619
+ .tds-select:has( > button) [popover]{
1620
+ position-anchor:--tds-select-anchor;
1621
+ inset:auto;
1622
+ inline-size:-moz-max-content;
1623
+ inline-size:max-content;
1624
+ min-inline-size:anchor-size(width);
1625
+ max-inline-size:100vi;
1626
+ max-block-size:min(50vh, 20rem);
1627
+ padding:var(--tds-select-dropdown-padding);
1628
+ margin-block:var(--tds-select-dropdown-margin-block);
1629
+ position-area:block-end span-inline-start;
1630
+ position-try-fallbacks:flip-block, flip-inline;
1631
+ overflow:auto;
1632
+ overflow-x:hidden;
1633
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1634
+ overscroll-behavior:none;
1635
+ -webkit-user-select:none;
1636
+ -moz-user-select:none;
1637
+ user-select:none;
1638
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1639
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1640
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1641
+ background:var(--tds-select-dropdown-background-color);
1642
+ border:var(--tds-select-dropdown-border);
1643
+ border-radius:var(--tds-select-dropdown-border-radius);
1644
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1645
+ opacity:var(--tds-select-dropdown-open-opacity);
1646
+ translate:var(--tds-select-dropdown-open-translate);
1647
+ transition:var(--tds-select-dropdown-transition);
1648
+ }
1649
+
1650
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
1651
+ opacity:var(--tds-select-dropdown-closed-opacity);
1652
+ translate:var(--tds-select-dropdown-closed-translate);
1653
+ }
1654
+
1655
+ :is(.tds-select:has( > button) [popover]) ul{
1656
+ padding:0;
1657
+ margin:0;
1658
+ list-style:none;
1659
+ }
1660
+
1661
+ @starting-style{
1662
+ :is(.tds-select:has( > button) [popover]):popover-open{
1663
+ opacity:var(--tds-select-dropdown-closed-opacity);
1664
+ translate:var(--tds-select-dropdown-closed-translate);
1665
+ }
1666
+ }
1667
+
1668
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1669
+ .tds-select select:has(> button){
1670
+ padding-inline-end:0;
1671
+ background-image:none;
1672
+ }
1673
+ @media (hover) and (pointer: fine){
1674
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1675
+ padding-block:0;
1676
+ -webkit-appearance:base-select;
1677
+ -moz-appearance:base-select;
1678
+ appearance:base-select;
1679
+ }
1680
+ }
1681
+ :is(.tds-select select:has( > button))::picker-icon{
1682
+ flex-shrink:0;
1683
+ width:var(--tds-select-caret-size);
1684
+ height:var(--tds-select-caret-size);
1685
+ margin-inline-end:var(--tds-select-caret-inline-offset);
1686
+ content:var(--tds-select-background-image);
1687
+ transition:var(--tds-select-caret-transition);
1688
+ }
1689
+
1690
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1691
+ opacity:var(--tds-select-dropdown-closed-opacity);
1692
+ translate:var(--tds-select-dropdown-closed-translate);
1693
+ }
1694
+
1695
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1696
+ outline-color:var(--t-focus-ring-color);
1697
+ outline-offset:var(--t-focus-ring-offset);
1698
+ border-color:var(--tds-select-border-color-active);
1699
+ }
1700
+
1701
+ :is(.tds-select select:has( > button)):open::picker-icon{
1702
+ opacity:1;
1703
+ transform:rotate(.5turn);
1704
+ }
1705
+
1706
+ :is(.tds-select select:has( > button)) selectedcontent{
1707
+ overflow:hidden;
1708
+ text-overflow:ellipsis;
1709
+ line-height:calc(var(--tds-select-min-height) - 2px);
1710
+ white-space:nowrap;
1711
+ }
1712
+
1713
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1714
+ color:var(--tds-select-placeholder-color);
1715
+ }
1716
+
1717
+ :is(.tds-select select:has( > button))::picker(select){
1718
+ inset:auto;
1719
+ inline-size:-moz-max-content;
1720
+ inline-size:max-content;
1721
+ min-inline-size:anchor-size(width);
1722
+ max-inline-size:100vi;
1723
+ padding:var(--tds-select-dropdown-padding);
1724
+ margin-block:var(--tds-select-dropdown-margin-block);
1725
+ position-try-fallbacks:flip-block, flip-inline;
1726
+ overflow:auto;
1727
+ overflow-x:hidden;
1728
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1729
+ overscroll-behavior:none;
1730
+ -webkit-user-select:none;
1731
+ -moz-user-select:none;
1732
+ user-select:none;
1733
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1734
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1735
+ background:var(--tds-select-dropdown-background-color);
1736
+ border:var(--tds-select-dropdown-border);
1737
+ border-radius:var(--tds-select-dropdown-border-radius);
1738
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1739
+ opacity:var(--tds-select-dropdown-open-opacity);
1740
+ translate:var(--tds-select-dropdown-open-translate);
1741
+ transition:var(--tds-select-dropdown-transition);
1742
+ }
1743
+
1744
+ :is(.tds-select select:has( > button)) option::checkmark{
1745
+ display:none;
1746
+ }
1747
+
1748
+ @starting-style{
1749
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1750
+ opacity:var(--tds-select-dropdown-closed-opacity);
1751
+ translate:var(--tds-select-dropdown-closed-translate);
1752
+ }
1753
+ }
1754
+ }
1755
+
1756
+ .tds-input{
1757
+ --tds-input-border-color:var(--t-form-border-color);
1758
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
1759
+ --tds-input-background-color:var(--t-form-background-color);
1760
+ --tds-input-color:var(--t-form-color);
1761
+ --tds-input-font-size:var(--t-font-size-md);
1762
+ --tds-input-description-color:var(--t-text-color-secondary);
1763
+ --tds-input-description-invalid-icon-display:none;
1764
+ --tds-input-min-height:var(--t-container-size-md);
1765
+ --tds-input-padding-inline:var(--t-spacing-1);
1766
+
1767
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
1768
+
1769
+ display:flex;
1770
+ flex-direction:column;
1771
+ gap:var(--t-spacing-half);
1772
+ }
1773
+
1774
+ .tds-input label{
1775
+ font-size:var(--t-font-size-md);
1776
+ font-weight:var(--t-font-weight-normal);
1777
+ color:var(--t-text-color);
1778
+ }
1779
+
1780
+ .tds-input :is(input,textarea){
1781
+ inline-size:100%;
1782
+ block-size:auto;
1783
+ min-block-size:var(--tds-input-min-height);
1784
+ padding-block:var(--tds-input-padding-block);
1785
+ padding-inline:var(--tds-input-padding-inline);
1786
+ font-family:inherit;
1787
+ font-size:var(--tds-input-font-size);
1788
+ color:var(--tds-input-color);
1789
+ -webkit-appearance:none;
1790
+ -moz-appearance:none;
1791
+ appearance:none;
1792
+ outline:var(--t-focus-ring-width) solid transparent;
1793
+ outline-offset:0;
1794
+ background-color:var(--tds-input-background-color);
1795
+ border:var(--t-form-border-width) solid var(--tds-input-border-color);
1796
+ border-radius:var(--t-form-border-radius);
1797
+ transition-timing-function:var(--t-ease-in-out);
1798
+ transition-duration:var(--t-duration-200);
1799
+ transition-property:var(--tds-input-transition-property);
1800
+ }
1801
+
1802
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
1803
+ border-color:var(--tds-input-border-color-hover);
1804
+ }
1805
+
1806
+ :is(.tds-input :is(input,textarea)):focus{
1807
+ outline-color:transparent;
1808
+ }
1809
+
1810
+ :is(.tds-input :is(input,textarea)):focus-visible{
1811
+ outline-color:var(--t-focus-ring-color);
1812
+ outline-offset:var(--t-focus-ring-offset);
1813
+ border-color:var(--t-form-border-color-focus);
1814
+ }
1815
+
1816
+ :is(.tds-input :is(input,textarea))::-moz-placeholder{
1817
+ color:var(--t-form-placeholder-color);
1818
+ -moz-user-select:none;
1819
+ user-select:none;
1820
+ }
1821
+
1822
+ :is(.tds-input :is(input,textarea))::placeholder{
1823
+ color:var(--t-form-placeholder-color);
1824
+ -webkit-user-select:none;
1825
+ -moz-user-select:none;
1826
+ user-select:none;
1827
+ }
1828
+
1829
+ @media (prefers-reduced-motion: reduce){
1830
+
1831
+ .tds-input :is(input,textarea){
1832
+ --tds-input-transition-property:none;
1833
+ }
1834
+ }
1835
+
1836
+ .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
1837
+ --tds-input-background-color:var(--t-form-background-color-error);
1838
+ --tds-input-border-color:var(--t-form-border-color-error);
1839
+ --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
1840
+ --tds-input-description-color:var(--t-text-color-status-error);
1841
+ --tds-input-description-invalid-icon-display:inline-block;
1842
+ }
1843
+
1844
+ .tds-input:has(:is(input,textarea):required) label::after{
1845
+ margin-left:.25ch;
1846
+ color:var(--t-text-color-status-error);
1847
+ content:"*";
1848
+ }
1849
+
1850
+ .tds-input:where(:has(:is(input,textarea):disabled)){
1851
+ --tds-input-border-color:var(--t-form-border-color-disabled);
1852
+ --tds-input-background-color:var(--t-form-background-color-disabled);
1853
+ --tds-input-color:var(--t-form-color-disabled);
1854
+ }
1855
+
1856
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
1857
+ cursor:not-allowed;
1858
+ }
1859
+
1860
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
1861
+ --tds-input-border-color:var(--t-form-border-color-readonly);
1862
+ --tds-input-background-color:var(--t-form-background-color-readonly);
1863
+ }
1864
+
1865
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
1866
+ border-color:var(--tds-input-border-color-hover);
1867
+ }
1868
+
1869
+ .tds-input.tds-input--lg{
1870
+ --tds-input-min-height:var(--t-container-size-lg);
1871
+ --tds-input-font-size:var(--t-font-size-lg);
1872
+ }
1873
+
1874
+ .tds-input-description{
1875
+ display:flex;
1876
+ gap:var(--t-spacing-half);
1877
+ align-items:flex-start;
1878
+ margin:0;
1879
+ font-size:var(--t-font-size-sm);
1880
+ line-height:1.35;
1881
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
1882
+ cursor:text;
1883
+ }
1884
+
1885
+ .tds-input-description .tds-input-description-invalid-icon{
1886
+ display:var(--tds-input-description-invalid-icon-display, none);
1887
+ flex-shrink:0;
1888
+ margin-block-start:calc(.5lh - .5em);
1889
+ line-height:1.35;
1890
+ }
1891
+
1892
+ .tds-loading-spinner{
1893
+ --tds-loading-spinner-size:1.25em;
1894
+
1895
+ position:absolute;
1896
+ right:0;
1897
+ left:0;
1898
+ visibility:var(--tds-loading-spinner-visibility, hidden);
1899
+ width:var(--tds-loading-spinner-size);
1900
+ height:var(--tds-loading-spinner-size);
1901
+ margin:auto;
1902
+ border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
1903
+ border-top-color:var(--tds-loading-spinner-color, currentcolor);
1904
+ border-radius:50%;
1905
+ animation:spinner-rotate 500ms infinite linear;
1906
+ animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
1907
+ }
1908
+
1909
+ @keyframes spinner-rotate{
1910
+ to{
1911
+ transform:rotate(360deg);
1912
+ }
1913
+ }
1914
+
1915
+ @media (prefers-reduced-motion: reduce){
1916
+ [class*="--loading"] .tds-loading-spinner{
1917
+ --tds-loading-spinner-animation-play-state:paused;
1918
+ }
1919
+ }
1920
+
1921
+ .symbol{
1922
+ display:inline-block;
1923
+ vertical-align:text-top;
1924
+ fill:currentColor;
1925
+ height:1em;
1926
+ width:1em;
1927
+ }
1928
+
1929
+ .tds-btn{
1930
+ --tds-btn-padding-x:12px;
1931
+ --tds-btn-padding-truncated-x:8px;
1932
+ --tds-btn-padding-y:3px;
1933
+ --tds-btn-font-size:16px;
1934
+ --tds-btn-font-weight:400;
1935
+ --tds-btn-line-height:1.5;
1936
+ --tds-btn-color:var(--t-text-color-headline);
1937
+ --tds-btn-bg:transparent;
1938
+ --tds-btn-border-width:var(--t-border-width);
1939
+ --tds-btn-border-color:transparent;
1940
+ --tds-btn-border-radius:var(--t-border-radius-md);
1941
+ --tds-btn-border-color-hover:transparent;
1942
+ --tds-btn-disabled-opacity:1;
1943
+ --tds-btn-min-height:32px;
1944
+ --tds-btn-text-decoration:none;
1945
+ --tds-btn-attention-icon-size:1em;
1946
+ display:inline-flex;
1947
+ gap:1ex;
1948
+ align-items:center;
1949
+ justify-content:center;
1950
+ width:auto;
1951
+ min-height:var(--tds-btn-min-height);
1952
+ padding:var(--tds-btn-padding-y) var(--tds-btn-padding-x);
1953
+ font-size:var(--tds-btn-font-size);
1954
+ font-weight:var(--tds-btn-font-weight);
1955
+ line-height:var(--tds-btn-line-height);
1956
+ vertical-align:middle;
1957
+ color:var(--tds-btn-color);
1958
+ text-align:center;
1959
+ -webkit-text-decoration:var(--tds-btn-text-decoration);
1960
+ text-decoration:var(--tds-btn-text-decoration);
1961
+ cursor:pointer;
1962
+ -webkit-user-select:none;
1963
+ -moz-user-select:none;
1964
+ user-select:none;
1965
+ background-color:var(--tds-btn-bg);
1966
+ background-clip:padding-box;
1967
+ border:var(--tds-btn-border-width) solid var(--tds-btn-border-color);
1968
+ border-radius:var(--tds-btn-border-radius);
1969
+ transition-timing-function:var(--t-ease-in-out);
1970
+ transition-duration:var(--t-duration-200);
1971
+ transition-property:color, background-color, border-color, box-shadow, fill, stroke, opacity;
1972
+ }
1973
+
1974
+ .tds-btn:where(.tds-btn--icononly,:has(.prefix,svg:not(.suffix))){
1975
+ padding-left:var(--tds-btn-padding-truncated-x);
1976
+ }
1977
+
1978
+ .tds-btn:where(.tds-btn--icononly,:has(.suffix,svg:not(.prefix))){
1979
+ padding-right:var(--tds-btn-padding-truncated-x);
1980
+ }
1981
+
1982
+ .tds-btn:hover{
1983
+ color:var(--tds-btn-color-hover);
1984
+ background-color:var(--tds-btn-bg-hover);
1985
+ border-color:var(--tds-btn-border-color-hover);
1986
+ }
1987
+
1988
+ .tds-btn:focus-visible{
1989
+ color:var(--tds-btn-color-hover);
1990
+ outline:var(--t-focus-ring-outline);
1991
+ outline-offset:var(--t-focus-ring-offset);
1992
+ background-color:var(--tds-btn-bg-hover);
1993
+ border-color:var(--tds-btn-border-color-hover);
1994
+ }
1995
+
1996
+ .tds-btn:active,.tds-btn.active{
1997
+ color:var(--tds-btn-color-active);
1998
+ background-color:var(--tds-btn-bg-active);
1999
+ border-color:var(--tds-btn-border-color-active);
2000
+ }
2001
+
2002
+ .tds-btn:disabled,.tds-btn.disabled{
2003
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-dark-020);
2004
+ --tds-btn-loading-spinner-color:var(--t-text-color-status-neutral);
2005
+ color:var(--tds-btn-color-disabled);
2006
+ pointer-events:none;
2007
+ background-color:var(--tds-btn-bg-disabled);
2008
+ border-color:var(--tds-btn-border-color-disabled);
2009
+ opacity:var(--tds-btn-disabled-opacity);
2010
+ }
2011
+
2012
+ .tds-btn svg:not(.symbol){
2013
+ display:block;
2014
+ width:.66666667lh;
2015
+ height:.66666667lh;
2016
+ color:var(--tds-btn-icon-color, currentColor);
2017
+ }
2018
+
2019
+ .tds-btn .tds-loading-spinner{
2020
+ --tds-loading-spinner-track-color:var(--tds-btn-loading-spinner-track-color);
2021
+ --tds-loading-spinner-track-width:var(--tds-btn-loading-spinner-track-width);
2022
+ --tds-loading-spinner-color:var(--tds-btn-loading-spinner-color);
2023
+ --tds-loading-spinner-visibility:var(--tds-btn-loading-spinner-visibility);
2024
+ --tds-loading-spinner-animation-play-state:var(--tds-btn-loading-spinner-animation-play-state);
2025
+ }
2026
+
2027
+ @media (prefers-reduced-motion: reduce){
2028
+
2029
+ .tds-btn{
2030
+ transition:none;
2031
+ }
2032
+ }
2033
+
2034
+ .tds-btn--xl{
2035
+ --tds-btn-padding-y:11px;
2036
+ --tds-btn-padding-x:18px;
2037
+ --tds-btn-padding-truncated-x:12px;
2038
+ --tds-btn-min-height:48px;
2039
+ }
2040
+
2041
+ .tds-btn--lg{
2042
+ --tds-btn-padding-y:7px;
2043
+ --tds-btn-padding-x:14px;
2044
+ --tds-btn-min-height:40px;
2045
+ }
2046
+
2047
+ .tds-btn--sm{
2048
+ --tds-btn-padding-y:.5px;
2049
+ --tds-btn-padding-x:7px;
2050
+ --tds-btn-padding-truncated-x:4px;
2051
+ --tds-btn-min-height:24px;
2052
+ --tds-btn-font-size:var(--t-font-size-sm);
2053
+ --tds-btn-loading-spinner-track-width:3px;
2054
+ }
2055
+
2056
+ .tds-btn--xs{
2057
+ --tds-btn-padding-y:0;
2058
+ --tds-btn-padding-x:5px;
2059
+ --tds-btn-padding-truncated-x:5px;
2060
+ --tds-btn-min-height:20px;
2061
+ --tds-btn-font-size:var(--t-font-size-xs);
2062
+ --tds-btn-loading-spinner-track-width:3px;
2063
+ }
2064
+
2065
+ .tds-btn--neutral{
2066
+ --tds-btn-color:var(--t-text-color-status-neutral);
2067
+ --tds-btn-bg:var(--t-fill-color-button-neutral-solid);
2068
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-solid);
2069
+ --tds-btn-color-hover:var(--t-text-color-status-neutral);
2070
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-solid-hover);
2071
+ --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-solid-hover);
2072
+ --tds-btn-color-active:var(--t-text-color-status-neutral);
2073
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-solid-active);
2074
+ --tds-btn-border-color-active:var(--t-fill-color-button-neutral-solid-active);
2075
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2076
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
2077
+ --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
2078
+ }
2079
+
2080
+ .tds-btn--neutral-inline{
2081
+ --tds-btn-color:var(--t-text-color-status-neutral);
2082
+ --tds-btn-bg:transparent;
2083
+ --tds-btn-border-color:transparent;
2084
+ --tds-btn-color-hover:var(--t-text-color-status-neutral);
2085
+ --tds-btn-bg-hover:transparent;
2086
+ --tds-btn-border-color-hover:transparent;
2087
+ --tds-btn-padding-y:0;
2088
+ --tds-btn-padding-x:0;
2089
+ --tds-btn-min-height:auto;
2090
+ --tds-btn-text-decoration:none;
2091
+ --tds-btn-border-width:0;
2092
+ --tds-btn-font-size:inherit;
2093
+ --tds-btn-font-weight:inherit;
2094
+ --tds-btn-line-height:inherit;
2095
+ font-family:inherit;
2096
+ font-style:inherit;
2097
+ vertical-align:inherit;
2098
+ }
2099
+
2100
+ .tds-btn--neutral-inline:hover,.tds-btn--neutral-inline:focus-visible{
2101
+ --tds-btn-text-decoration:underline;
2102
+ }
2103
+
2104
+ .tds-btn--interaction{
2105
+ --tds-btn-color:var(--t-text-color-inverted);
2106
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
2107
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
2108
+ --tds-btn-color-hover:var(--t-text-color-inverted);
2109
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
2110
+ --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
2111
+ --tds-btn-color-active:var(--t-text-color-inverted);
2112
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
2113
+ --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
2114
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2115
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
2116
+ --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
2117
2117
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
2118
2118
  }
2119
2119
 
@@ -3336,86 +3336,310 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3336
3336
  }
3337
3337
  }
3338
3338
 
3339
- @media (prefers-color-scheme: dark){
3339
+ @media (prefers-color-scheme: dark){
3340
+ }
3341
+
3342
+ .tds-combo-box{
3343
+ --tds-combo-box-border-color:var(--t-form-border-color);
3344
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3345
+ --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3346
+ --tds-combo-box-background-color:var(--t-form-background-color);
3347
+ --tds-combo-box-color:var(--t-form-color);
3348
+ --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3349
+ --tds-combo-box-font-size:var(--t-font-size-md);
3350
+ --tds-combo-box-min-height:var(--t-container-size-md);
3351
+ --tds-combo-box-padding-block:6px;
3352
+ --tds-combo-box-button-offset:4px;
3353
+ --tds-combo-box-description-color:var(--t-text-color-secondary);
3354
+ --tds-combo-box-description-invalid-icon-display:none;
3355
+
3356
+ position:relative;
3357
+ display:flex;
3358
+ flex-direction:column;
3359
+ gap:var(--t-spacing-half);
3360
+ }
3361
+
3362
+ .tds-combo-box[data-required] .tds-combo-box-label::after{
3363
+ margin-left:.25ch;
3364
+ color:var(--t-text-color-status-error);
3365
+ content:"*";
3366
+ }
3367
+
3368
+ .tds-combo-box[data-invalid]{
3369
+ --tds-combo-box-border-color:var(--t-form-border-color-error);
3370
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3371
+ --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3372
+ --tds-combo-box-background-color:var(--t-form-background-color-error);
3373
+ --tds-combo-box-description-color:var(--t-text-color-status-error);
3374
+ --tds-combo-box-description-invalid-icon-display:inline-block;
3375
+ }
3376
+
3377
+ .tds-combo-box[data-disabled]{
3378
+ --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3379
+ --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3380
+ --tds-combo-box-color:var(--t-form-color-disabled);
3381
+ }
3382
+
3383
+ .tds-combo-box[data-disabled] .tds-combo-box-label{
3384
+ color:var(--t-form-color-disabled);
3385
+ }
3386
+
3387
+ .tds-combo-box[data-disabled] .tds-combo-box-field{
3388
+ cursor:not-allowed;
3389
+ }
3390
+
3391
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
3392
+ transform:rotate(.5turn);
3393
+ }
3394
+
3395
+ .tds-combo-box--lg{
3396
+ --tds-combo-box-min-height:var(--t-container-size-lg);
3397
+ --tds-combo-box-font-size:var(--t-font-size-lg);
3398
+ --tds-combo-box-button-offset:5px;
3399
+ }
3400
+
3401
+ .tds-combo-box-label{
3402
+ font-size:var(--t-font-size-md);
3403
+ font-weight:var(--t-font-weight-normal);
3404
+ color:var(--t-text-color);
3405
+ cursor:default;
3340
3406
  }
3341
3407
 
3342
- .tds-checkbox-group{
3343
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3344
- --tds-checkbox-group-line-height:1.4;
3345
- --tds-checkbox-group-gap:var(--t-spacing-1);
3408
+ .tds-combo-box-field{
3409
+ display:flex;
3410
+ align-items:center;
3411
+ inline-size:100%;
3412
+ min-block-size:var(--tds-combo-box-min-height);
3413
+ font-family:inherit;
3414
+ font-size:var(--tds-combo-box-font-size);
3415
+ line-height:1;
3416
+ color:var(--tds-combo-box-color);
3417
+ -webkit-appearance:none;
3418
+ -moz-appearance:none;
3419
+ appearance:none;
3420
+ cursor:default;
3421
+ outline:var(--t-focus-ring-width) solid transparent;
3422
+ outline-offset:0;
3423
+ background-color:var(--tds-combo-box-background-color);
3424
+ border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3425
+ border-radius:var(--t-form-border-radius);
3426
+ }
3346
3427
 
3347
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3428
+ .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3429
+ border-color:var(--tds-combo-box-border-color-hover);
3430
+ }
3348
3431
 
3349
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3350
- --tds-checkbox-group-description-line-height:1.35;
3351
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3352
- --tds-checkbox-group-description-invalid-icon-display:none;
3432
+ .tds-combo-box-field[data-focus-within]{
3433
+ outline-color:var(--t-focus-ring-color);
3434
+ outline-offset:var(--t-focus-ring-offset);
3435
+ border-color:var(--tds-combo-box-border-color-active);
3436
+ }
3437
+
3438
+ .tds-combo-box-field:has([readonly]){
3439
+ --tds-combo-box-border-color:var(--t-form-border-color-readonly);
3440
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-readonly);
3441
+ --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3442
+ }
3443
+
3444
+ .tds-combo-box-field[data-focus-within]:has([readonly]){
3445
+ border-color:var(--t-form-border-color-hover);
3446
+ }
3447
+
3448
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
3449
+ display:none;
3450
+ }
3451
+
3452
+ .tds-combo-box-input{
3353
3453
  display:flex;
3354
- flex-direction:column;
3355
- gap:var(--tds-checkbox-group-gap);
3454
+ flex:1;
3455
+ align-items:center;
3456
+ padding-block:var(--tds-combo-box-padding-block);
3457
+ padding-inline-start:var(--t-spacing-1);
3458
+ font-family:inherit;
3459
+ font-size:inherit;
3460
+ color:inherit;
3461
+ outline:0;
3462
+ background:transparent;
3463
+ border:0;
3464
+ }
3465
+
3466
+ .tds-combo-box-input::-moz-placeholder{
3467
+ color:var(--tds-combo-box-placeholder-color);
3468
+ -moz-user-select:none;
3469
+ user-select:none;
3470
+ }
3471
+
3472
+ .tds-combo-box-input::placeholder{
3473
+ color:var(--tds-combo-box-placeholder-color);
3474
+ -webkit-user-select:none;
3475
+ -moz-user-select:none;
3476
+ user-select:none;
3477
+ }
3478
+
3479
+ .tds-combo-box-button{
3480
+ flex-shrink:0;
3481
+ align-self:center;
3482
+ inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3483
+ block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3484
+ padding:0;
3485
+ margin-inline-end:var(--tds-combo-box-button-offset);
3486
+ }
3487
+
3488
+ .tds-combo-box-button > svg{
3489
+ inline-size:var(--tds-combo-box-font-size);
3490
+ block-size:var(--tds-combo-box-font-size);
3491
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
3492
+ }
3493
+
3494
+ .tds-combo-box-button:not(.tds-btn){
3495
+ display:inline-flex;
3496
+ align-items:center;
3497
+ justify-content:center;
3498
+ inline-size:auto;
3499
+ block-size:auto;
3500
+ margin-inline-end:.75em;
3501
+ color:var(--t-icon-color);
3502
+ cursor:default;
3503
+ background:transparent;
3504
+ border:0;
3505
+ }
3506
+
3507
+ .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3508
+ outline:0;
3509
+ }
3510
+
3511
+ .tds-combo-box-popover{
3512
+ width:var(--trigger-width);
3513
+ max-block-size:inherit;
3514
+ padding:var(--t-spacing-1);
3515
+ overflow:auto;
3516
+ outline:0;
3517
+ scrollbar-color:#0004 #0000;
3518
+ scrollbar-width:thin;
3519
+ background:var(--t-surface-color-card);
3520
+ background-clip:padding-box;
3521
+ border:1px solid var(--t-border-color);
3522
+ border-radius:var(--t-border-radius);
3523
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3524
+ }
3525
+
3526
+ .tds-combo-box-popover[data-entering]{
3527
+ animation:tds-combo-box-popover-enter 160ms ease;
3528
+ }
3529
+
3530
+ .tds-combo-box-popover[data-exiting]{
3531
+ animation:tds-combo-box-popover-exit 130ms ease;
3532
+ }
3533
+
3534
+ @keyframes tds-combo-box-popover-enter{
3535
+ from{
3536
+ opacity:0;
3537
+ transform:translateY(-8px);
3538
+ }
3539
+ }
3540
+
3541
+ @keyframes tds-combo-box-popover-exit{
3542
+ to{
3543
+ opacity:0;
3544
+ transform:translateY(-8px);
3545
+ }
3546
+ }
3547
+
3548
+ @media (prefers-reduced-motion: reduce){
3549
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3550
+ animation:none;
3551
+ }
3552
+
3553
+ .tds-combo-box-button > svg{
3554
+ transition:none;
3555
+ }
3556
+ }
3557
+
3558
+ .tds-combo-box-list{
3356
3559
  padding:0;
3357
3560
  margin:0;
3561
+ }
3358
3562
 
3359
- font-size:var(--tds-checkbox-group-font-size);
3360
- line-height:var(--tds-checkbox-group-line-height);
3361
- border:0;
3563
+ .tds-combo-box-list-item{
3564
+ display:block;
3565
+ padding-block:var(--t-spacing-1);
3566
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3567
+ overflow:hidden;
3568
+ text-overflow:ellipsis;
3569
+ font-size:1rem;
3570
+ color:var(--t-text-color);
3571
+ white-space:nowrap;
3572
+ cursor:default;
3573
+ border-radius:var(--t-border-radius);
3574
+ }
3575
+
3576
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
3577
+ background:var(--t-fill-color-neutral-070);
3578
+ }
3579
+
3580
+ .tds-combo-box-list-item[data-selected]{
3581
+ background:var(--t-fill-color-button-interaction-ghost-active);
3582
+ }
3583
+
3584
+ .tds-combo-box-list-item[data-disabled]{
3585
+ color:var(--t-form-color-disabled);
3586
+ cursor:not-allowed;
3587
+ }
3588
+
3589
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
3590
+ background:transparent;
3591
+ }
3592
+
3593
+ .tds-combo-box-empty-state{
3594
+ position:relative;
3595
+ min-block-size:var(--t-spacing-3);
3596
+ padding-block:var(--t-spacing-1);
3597
+ padding-inline:var(--t-spacing-2);
3598
+ font-size:var(--t-font-size-md);
3599
+ color:var(--t-text-color-secondary);
3362
3600
  }
3363
3601
 
3364
- .tds-checkbox-group legend{
3365
- padding:0;
3366
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3367
- }
3602
+ .tds-combo-box-load-more{
3603
+ position:relative;
3604
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
3605
+ }
3368
3606
 
3369
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3370
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3371
- }
3607
+ .tds-combo-box-empty-state,
3608
+ .tds-combo-box-load-more{
3609
+ --tds-loading-spinner-visibility:visible;
3610
+ --tds-loading-spinner-animation-play-state:running;
3611
+ }
3372
3612
 
3373
- .tds-checkbox-group[aria-invalid="true"]{
3374
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3375
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3613
+ .tds-combo-box-list-section:not(:first-child){
3614
+ margin-block-start:var(--t-spacing-half);
3376
3615
  }
3377
3616
 
3378
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3379
- margin-left:.25ch;
3380
- color:var(--t-text-color-status-error);
3381
- content:"*";
3382
- }
3383
-
3384
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3385
- content:none;
3386
- }
3387
-
3388
- .tds-checkbox-group-fields{
3389
- display:flex;
3390
- flex-direction:column;
3391
- gap:var(--tds-checkbox-group-gap);
3392
- align-items:flex-start;
3617
+ .tds-combo-box-section-header{
3618
+ padding-block:var(--t-spacing-1);
3619
+ padding-inline:var(--t-spacing-1);
3620
+ font-size:var(--t-font-size-sm);
3621
+ font-weight:var(--t-font-weight-semibold);
3622
+ color:var(--t-text-color-secondary);
3393
3623
  }
3394
3624
 
3395
- .tds-checkbox-group-description{
3625
+ .tds-combo-box-description{
3396
3626
  display:flex;
3397
3627
  gap:var(--t-spacing-half);
3398
3628
  align-items:flex-start;
3399
3629
  margin:0;
3400
- font-size:var(--tds-checkbox-group-description-font-size);
3401
- line-height:var(--tds-checkbox-group-description-line-height);
3402
- color:var(--tds-checkbox-group-description-color);
3630
+ font-size:var(--t-font-size-sm);
3631
+ line-height:1.35;
3632
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3403
3633
  cursor:text;
3404
3634
  }
3405
3635
 
3406
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3407
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3636
+ .tds-combo-box-description .tds-combo-box-description-invalid-icon{
3637
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3408
3638
  flex-shrink:0;
3409
- margin-top:calc(.5lh - .5em);
3410
- line-height:var(--tds-checkbox-group-description-line-height);
3639
+ margin-block-start:calc(.5lh - .5em);
3640
+ line-height:1.35;
3411
3641
  }
3412
3642
 
3413
- .tds-checkbox-group--sm{
3414
- --tds-checkbox-group-line-height:1.35;
3415
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3416
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3417
- --tds-checkbox-group-description-line-height:1.3;
3418
- }
3419
3643
 
3420
3644
  .tds-date-picker{
3421
3645
  --tds-date-picker-border-color:var(--t-form-border-color);
@@ -3821,393 +4045,169 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3821
4045
  border-collapse:collapse;
3822
4046
  }
3823
4047
 
3824
- .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
3825
- padding:0;
3826
- border:0;
3827
- }
3828
-
3829
- .tds-date-picker-calendar-header-cell{
3830
- padding-block-end:var(--t-spacing-1);
3831
- font-size:.875em;
3832
- font-weight:var(--t-font-weight-medium);
3833
- color:var(--t-text-color-secondary);
3834
- text-align:center;
3835
- -webkit-user-select:none;
3836
- -moz-user-select:none;
3837
- user-select:none;
3838
- }
3839
-
3840
- .tds-date-picker-calendar-cell-button{
3841
- position:relative;
3842
- display:flex;
3843
- align-items:center;
3844
- justify-content:center;
3845
- inline-size:2.25em;
3846
- block-size:2.25em;
3847
- color:var(--t-text-color);
3848
- cursor:pointer;
3849
- -webkit-user-select:none;
3850
- -moz-user-select:none;
3851
- user-select:none;
3852
- outline:0;
3853
- }
3854
-
3855
- .tds-date-picker-calendar-cell-button::before{
3856
- position:absolute;
3857
- inset:0;
3858
- z-index:-1;
3859
- content:"";
3860
- background-color:var(--_background-color);
3861
- border-radius:50%;
3862
- }
3863
-
3864
- .tds-date-picker-calendar-cell-button[data-today]::before{
3865
- box-shadow:inset 0 0 0 1.5px var(--t-border-color);
3866
- }
3867
-
3868
- .tds-date-picker-calendar-cell-button[data-outside-month]{
3869
- display:none;
3870
- }
3871
-
3872
- .tds-date-picker-calendar-cell-button[data-hovered]{
3873
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
3874
- }
3875
-
3876
- .tds-date-picker-calendar-cell-button[data-pressed]{
3877
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
3878
- }
3879
-
3880
- .tds-date-picker-calendar-cell-button[data-selected]{
3881
- --_background-color:var(--t-fill-color-interaction);
3882
- font-weight:var(--t-font-weight-semibold);
3883
- color:var(--t-text-color-inverted);
3884
- border-color:transparent;
3885
- }
3886
-
3887
- .tds-date-picker-calendar-cell-button[data-unavailable]{
3888
- color:var(--t-text-color-disabled);
3889
- text-decoration:line-through;
3890
- cursor:not-allowed;
3891
- }
3892
-
3893
- .tds-date-picker-calendar-cell-button[data-disabled]{
3894
- color:var(--t-text-color-disabled);
3895
- }
3896
-
3897
- .tds-date-picker-calendar-cell-button[data-focus-visible]{
3898
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3899
- outline-offset:-2px;
3900
- }
3901
-
3902
- .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
3903
- outline-offset:var(--t-focus-ring-offset);
3904
- }
3905
-
3906
- .tds-date-picker-popover--lg{
3907
- --tds-date-picker-popover-font-size:var(--t-font-size-lg);
3908
- }
3909
-
3910
- .tds-combo-box{
3911
- --tds-combo-box-border-color:var(--t-form-border-color);
3912
- --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3913
- --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3914
- --tds-combo-box-background-color:var(--t-form-background-color);
3915
- --tds-combo-box-color:var(--t-form-color);
3916
- --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3917
- --tds-combo-box-font-size:var(--t-font-size-md);
3918
- --tds-combo-box-min-height:var(--t-container-size-md);
3919
- --tds-combo-box-padding-block:6px;
3920
- --tds-combo-box-button-offset:4px;
3921
- --tds-combo-box-description-color:var(--t-text-color-secondary);
3922
- --tds-combo-box-description-invalid-icon-display:none;
3923
-
3924
- position:relative;
3925
- display:flex;
3926
- flex-direction:column;
3927
- gap:var(--t-spacing-half);
3928
- }
3929
-
3930
- .tds-combo-box[data-required] .tds-combo-box-label::after{
3931
- margin-left:.25ch;
3932
- color:var(--t-text-color-status-error);
3933
- content:"*";
3934
- }
3935
-
3936
- .tds-combo-box[data-invalid]{
3937
- --tds-combo-box-border-color:var(--t-form-border-color-error);
3938
- --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3939
- --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3940
- --tds-combo-box-background-color:var(--t-form-background-color-error);
3941
- --tds-combo-box-description-color:var(--t-text-color-status-error);
3942
- --tds-combo-box-description-invalid-icon-display:inline-block;
3943
- }
3944
-
3945
- .tds-combo-box[data-disabled]{
3946
- --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3947
- --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3948
- --tds-combo-box-color:var(--t-form-color-disabled);
3949
- }
3950
-
3951
- .tds-combo-box[data-disabled] .tds-combo-box-label{
3952
- color:var(--t-form-color-disabled);
3953
- }
3954
-
3955
- .tds-combo-box[data-disabled] .tds-combo-box-field{
3956
- cursor:not-allowed;
3957
- }
3958
-
3959
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
3960
- transform:rotate(.5turn);
3961
- }
3962
-
3963
- .tds-combo-box--lg{
3964
- --tds-combo-box-min-height:var(--t-container-size-lg);
3965
- --tds-combo-box-font-size:var(--t-font-size-lg);
3966
- --tds-combo-box-button-offset:5px;
3967
- }
3968
-
3969
- .tds-combo-box-label{
3970
- font-size:var(--t-font-size-md);
3971
- font-weight:var(--t-font-weight-normal);
3972
- color:var(--t-text-color);
3973
- cursor:default;
3974
- }
3975
-
3976
- .tds-combo-box-field{
3977
- display:flex;
3978
- align-items:center;
3979
- inline-size:100%;
3980
- min-block-size:var(--tds-combo-box-min-height);
3981
- font-family:inherit;
3982
- font-size:var(--tds-combo-box-font-size);
3983
- line-height:1;
3984
- color:var(--tds-combo-box-color);
3985
- -webkit-appearance:none;
3986
- -moz-appearance:none;
3987
- appearance:none;
3988
- cursor:default;
3989
- outline:var(--t-focus-ring-width) solid transparent;
3990
- outline-offset:0;
3991
- background-color:var(--tds-combo-box-background-color);
3992
- border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3993
- border-radius:var(--t-form-border-radius);
3994
- }
3995
-
3996
- .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3997
- border-color:var(--tds-combo-box-border-color-hover);
3998
- }
3999
-
4000
- .tds-combo-box-field[data-focus-within]{
4001
- outline-color:var(--t-focus-ring-color);
4002
- outline-offset:var(--t-focus-ring-offset);
4003
- border-color:var(--tds-combo-box-border-color-active);
4004
- }
4005
-
4006
- .tds-combo-box-field:has([readonly]){
4007
- --tds-combo-box-border-color:var(--t-form-border-color-readonly);
4008
- --tds-combo-box-border-color-hover:var(--t-form-border-color-readonly);
4009
- --tds-combo-box-background-color:var(--t-form-background-color-readonly);
4010
- }
4011
-
4012
- .tds-combo-box-field[data-focus-within]:has([readonly]){
4013
- border-color:var(--t-form-border-color-hover);
4014
- }
4048
+ .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
4049
+ padding:0;
4050
+ border:0;
4051
+ }
4015
4052
 
4016
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
4017
- display:none;
4018
- }
4053
+ .tds-date-picker-calendar-header-cell{
4054
+ padding-block-end:var(--t-spacing-1);
4055
+ font-size:.875em;
4056
+ font-weight:var(--t-font-weight-medium);
4057
+ color:var(--t-text-color-secondary);
4058
+ text-align:center;
4059
+ -webkit-user-select:none;
4060
+ -moz-user-select:none;
4061
+ user-select:none;
4062
+ }
4019
4063
 
4020
- .tds-combo-box-input{
4064
+ .tds-date-picker-calendar-cell-button{
4065
+ position:relative;
4021
4066
  display:flex;
4022
- flex:1;
4023
4067
  align-items:center;
4024
- padding-block:var(--tds-combo-box-padding-block);
4025
- padding-inline-start:var(--t-spacing-1);
4026
- font-family:inherit;
4027
- font-size:inherit;
4028
- color:inherit;
4068
+ justify-content:center;
4069
+ inline-size:2.25em;
4070
+ block-size:2.25em;
4071
+ color:var(--t-text-color);
4072
+ cursor:pointer;
4073
+ -webkit-user-select:none;
4074
+ -moz-user-select:none;
4075
+ user-select:none;
4029
4076
  outline:0;
4030
- background:transparent;
4031
- border:0;
4032
4077
  }
4033
4078
 
4034
- .tds-combo-box-input::-moz-placeholder{
4035
- color:var(--tds-combo-box-placeholder-color);
4036
- -moz-user-select:none;
4037
- user-select:none;
4038
- }
4039
-
4040
- .tds-combo-box-input::placeholder{
4041
- color:var(--tds-combo-box-placeholder-color);
4042
- -webkit-user-select:none;
4043
- -moz-user-select:none;
4044
- user-select:none;
4079
+ .tds-date-picker-calendar-cell-button::before{
4080
+ position:absolute;
4081
+ inset:0;
4082
+ z-index:-1;
4083
+ content:"";
4084
+ background-color:var(--_background-color);
4085
+ border-radius:50%;
4045
4086
  }
4046
4087
 
4047
- .tds-combo-box-button{
4048
- flex-shrink:0;
4049
- align-self:center;
4050
- inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
4051
- block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
4052
- padding:0;
4053
- margin-inline-end:var(--tds-combo-box-button-offset);
4054
- }
4088
+ .tds-date-picker-calendar-cell-button[data-today]::before{
4089
+ box-shadow:inset 0 0 0 1.5px var(--t-border-color);
4090
+ }
4055
4091
 
4056
- .tds-combo-box-button > svg{
4057
- inline-size:var(--tds-combo-box-font-size);
4058
- block-size:var(--tds-combo-box-font-size);
4059
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
4092
+ .tds-date-picker-calendar-cell-button[data-outside-month]{
4093
+ display:none;
4060
4094
  }
4061
4095
 
4062
- .tds-combo-box-button:not(.tds-btn){
4063
- display:inline-flex;
4064
- align-items:center;
4065
- justify-content:center;
4066
- inline-size:auto;
4067
- block-size:auto;
4068
- margin-inline-end:.75em;
4069
- color:var(--t-icon-color);
4070
- cursor:default;
4071
- background:transparent;
4072
- border:0;
4096
+ .tds-date-picker-calendar-cell-button[data-hovered]{
4097
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
4073
4098
  }
4074
4099
 
4075
- .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
4076
- outline:0;
4077
- }
4100
+ .tds-date-picker-calendar-cell-button[data-pressed]{
4101
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
4102
+ }
4078
4103
 
4079
- .tds-combo-box-popover{
4080
- width:var(--trigger-width);
4081
- max-block-size:inherit;
4082
- padding:var(--t-spacing-1);
4083
- overflow:auto;
4084
- outline:0;
4085
- scrollbar-color:#0004 #0000;
4086
- scrollbar-width:thin;
4087
- background:var(--t-surface-color-card);
4088
- background-clip:padding-box;
4089
- border:1px solid var(--t-border-color);
4090
- border-radius:var(--t-border-radius);
4091
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4092
- }
4104
+ .tds-date-picker-calendar-cell-button[data-selected]{
4105
+ --_background-color:var(--t-fill-color-interaction);
4106
+ font-weight:var(--t-font-weight-semibold);
4107
+ color:var(--t-text-color-inverted);
4108
+ border-color:transparent;
4109
+ }
4093
4110
 
4094
- .tds-combo-box-popover[data-entering]{
4095
- animation:tds-combo-box-popover-enter 160ms ease;
4111
+ .tds-date-picker-calendar-cell-button[data-unavailable]{
4112
+ color:var(--t-text-color-disabled);
4113
+ text-decoration:line-through;
4114
+ cursor:not-allowed;
4096
4115
  }
4097
4116
 
4098
- .tds-combo-box-popover[data-exiting]{
4099
- animation:tds-combo-box-popover-exit 130ms ease;
4117
+ .tds-date-picker-calendar-cell-button[data-disabled]{
4118
+ color:var(--t-text-color-disabled);
4100
4119
  }
4101
4120
 
4102
- @keyframes tds-combo-box-popover-enter{
4103
- from{
4104
- opacity:0;
4105
- transform:translateY(-8px);
4121
+ .tds-date-picker-calendar-cell-button[data-focus-visible]{
4122
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4123
+ outline-offset:-2px;
4106
4124
  }
4107
- }
4108
4125
 
4109
- @keyframes tds-combo-box-popover-exit{
4110
- to{
4111
- opacity:0;
4112
- transform:translateY(-8px);
4126
+ .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
4127
+ outline-offset:var(--t-focus-ring-offset);
4113
4128
  }
4129
+
4130
+ .tds-date-picker-popover--lg{
4131
+ --tds-date-picker-popover-font-size:var(--t-font-size-lg);
4114
4132
  }
4115
4133
 
4116
- @media (prefers-reduced-motion: reduce){
4117
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
4118
- animation:none;
4119
- }
4134
+ .tds-checkbox-group{
4135
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
4136
+ --tds-checkbox-group-line-height:1.4;
4137
+ --tds-checkbox-group-gap:var(--t-spacing-1);
4120
4138
 
4121
- .tds-combo-box-button > svg{
4122
- transition:none;
4123
- }
4124
- }
4139
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
4125
4140
 
4126
- .tds-combo-box-list{
4141
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
4142
+ --tds-checkbox-group-description-line-height:1.35;
4143
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
4144
+ --tds-checkbox-group-description-invalid-icon-display:none;
4145
+ display:flex;
4146
+ flex-direction:column;
4147
+ gap:var(--tds-checkbox-group-gap);
4127
4148
  padding:0;
4128
4149
  margin:0;
4129
- }
4130
4150
 
4131
- .tds-combo-box-list-item{
4132
- display:block;
4133
- padding-block:var(--t-spacing-1);
4134
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
4135
- overflow:hidden;
4136
- text-overflow:ellipsis;
4137
- font-size:1rem;
4138
- color:var(--t-text-color);
4139
- white-space:nowrap;
4140
- cursor:default;
4141
- border-radius:var(--t-border-radius);
4151
+ font-size:var(--tds-checkbox-group-font-size);
4152
+ line-height:var(--tds-checkbox-group-line-height);
4153
+ border:0;
4142
4154
  }
4143
4155
 
4144
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
4145
- background:var(--t-fill-color-neutral-070);
4156
+ .tds-checkbox-group legend{
4157
+ padding:0;
4158
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
4146
4159
  }
4147
4160
 
4148
- .tds-combo-box-list-item[data-selected]{
4149
- background:var(--t-fill-color-button-interaction-ghost-active);
4161
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
4162
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
4150
4163
  }
4151
4164
 
4152
- .tds-combo-box-list-item[data-disabled]{
4153
- color:var(--t-form-color-disabled);
4154
- cursor:not-allowed;
4165
+ .tds-checkbox-group[aria-invalid="true"]{
4166
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
4167
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
4155
4168
  }
4156
4169
 
4157
- .tds-combo-box-list-item[data-disabled][data-hovered]{
4158
- background:transparent;
4170
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
4171
+ margin-left:.25ch;
4172
+ color:var(--t-text-color-status-error);
4173
+ content:"*";
4159
4174
  }
4160
4175
 
4161
- .tds-combo-box-empty-state{
4162
- position:relative;
4163
- min-block-size:var(--t-spacing-3);
4164
- padding-block:var(--t-spacing-1);
4165
- padding-inline:var(--t-spacing-2);
4166
- font-size:var(--t-font-size-md);
4167
- color:var(--t-text-color-secondary);
4168
- }
4169
-
4170
- .tds-combo-box-load-more{
4171
- position:relative;
4172
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
4173
- }
4174
-
4175
- .tds-combo-box-empty-state,
4176
- .tds-combo-box-load-more{
4177
- --tds-loading-spinner-visibility:visible;
4178
- --tds-loading-spinner-animation-play-state:running;
4179
- }
4180
-
4181
- .tds-combo-box-list-section:not(:first-child){
4182
- margin-block-start:var(--t-spacing-half);
4183
- }
4176
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
4177
+ content:none;
4178
+ }
4184
4179
 
4185
- .tds-combo-box-section-header{
4186
- padding-block:var(--t-spacing-1);
4187
- padding-inline:var(--t-spacing-1);
4188
- font-size:var(--t-font-size-sm);
4189
- font-weight:var(--t-font-weight-semibold);
4190
- color:var(--t-text-color-secondary);
4180
+ .tds-checkbox-group-fields{
4181
+ display:flex;
4182
+ flex-direction:column;
4183
+ gap:var(--tds-checkbox-group-gap);
4184
+ align-items:flex-start;
4191
4185
  }
4192
4186
 
4193
- .tds-combo-box-description{
4187
+ .tds-checkbox-group-description{
4194
4188
  display:flex;
4195
4189
  gap:var(--t-spacing-half);
4196
4190
  align-items:flex-start;
4197
4191
  margin:0;
4198
- font-size:var(--t-font-size-sm);
4199
- line-height:1.35;
4200
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
4192
+ font-size:var(--tds-checkbox-group-description-font-size);
4193
+ line-height:var(--tds-checkbox-group-description-line-height);
4194
+ color:var(--tds-checkbox-group-description-color);
4201
4195
  cursor:text;
4202
4196
  }
4203
4197
 
4204
- .tds-combo-box-description .tds-combo-box-description-invalid-icon{
4205
- display:var(--tds-combo-box-description-invalid-icon-display, none);
4198
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
4199
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
4206
4200
  flex-shrink:0;
4207
- margin-block-start:calc(.5lh - .5em);
4208
- line-height:1.35;
4201
+ margin-top:calc(.5lh - .5em);
4202
+ line-height:var(--tds-checkbox-group-description-line-height);
4209
4203
  }
4210
4204
 
4205
+ .tds-checkbox-group--sm{
4206
+ --tds-checkbox-group-line-height:1.35;
4207
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
4208
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
4209
+ --tds-checkbox-group-description-line-height:1.3;
4210
+ }
4211
4211
 
4212
4212
  .tds-time-field{
4213
4213
  --tds-time-field-border-color:var(--t-form-border-color);