@planningcenter/tapestry 4.10.0-rc.9 → 4.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/dist/components/DataTable/ActiveFilterInstance.d.ts +6 -4
  2. package/dist/components/DataTable/ActiveFilterInstance.d.ts.map +1 -1
  3. package/dist/components/DataTable/ActiveFilterInstance.js +8 -2
  4. package/dist/components/DataTable/ActiveFilterInstance.js.map +1 -1
  5. package/dist/components/DataTable/ActiveFilters.d.ts.map +1 -1
  6. package/dist/components/DataTable/ActiveFilters.js +3 -1
  7. package/dist/components/DataTable/ActiveFilters.js.map +1 -1
  8. package/dist/components/DataTable/CollectionEditorsLazy.d.ts.map +1 -1
  9. package/dist/components/DataTable/CollectionEditorsLazy.js +7 -5
  10. package/dist/components/DataTable/CollectionEditorsLazy.js.map +1 -1
  11. package/dist/components/DataTable/CollectionEditorsShared.d.ts.map +1 -1
  12. package/dist/components/DataTable/CollectionEditorsShared.js +1 -5
  13. package/dist/components/DataTable/CollectionEditorsShared.js.map +1 -1
  14. package/dist/components/DataTable/CollectionEditorsStatic.d.ts +1 -1
  15. package/dist/components/DataTable/CollectionEditorsStatic.d.ts.map +1 -1
  16. package/dist/components/DataTable/CollectionEditorsStatic.js +8 -17
  17. package/dist/components/DataTable/CollectionEditorsStatic.js.map +1 -1
  18. package/dist/components/DataTable/DataTable.js +14 -11
  19. package/dist/components/DataTable/DataTable.js.map +1 -1
  20. package/dist/components/DataTable/FilterChip.d.ts +4 -3
  21. package/dist/components/DataTable/FilterChip.d.ts.map +1 -1
  22. package/dist/components/DataTable/FilterChip.js +24 -3
  23. package/dist/components/DataTable/FilterChip.js.map +1 -1
  24. package/dist/components/DataTable/FilterControls.d.ts.map +1 -1
  25. package/dist/components/DataTable/FilterControls.js +1 -1
  26. package/dist/components/DataTable/FilterControls.js.map +1 -1
  27. package/dist/components/DataTable/FilterTypes.d.ts +32 -8
  28. package/dist/components/DataTable/FilterTypes.d.ts.map +1 -1
  29. package/dist/components/DataTable/FocusFirstControl.d.ts +11 -0
  30. package/dist/components/DataTable/FocusFirstControl.d.ts.map +1 -0
  31. package/dist/components/DataTable/FocusFirstControl.js +31 -0
  32. package/dist/components/DataTable/FocusFirstControl.js.map +1 -0
  33. package/dist/components/DataTable/TableSearch.d.ts.map +1 -1
  34. package/dist/components/DataTable/TableSearch.js +1 -1
  35. package/dist/components/DataTable/TableSearch.js.map +1 -1
  36. package/dist/components/DataTable/collectionFilter.d.ts +14 -8
  37. package/dist/components/DataTable/collectionFilter.d.ts.map +1 -1
  38. package/dist/components/DataTable/collectionFilter.js +9 -5
  39. package/dist/components/DataTable/collectionFilter.js.map +1 -1
  40. package/dist/components/DataTable/dateFilter.d.ts +7 -3
  41. package/dist/components/DataTable/dateFilter.d.ts.map +1 -1
  42. package/dist/components/DataTable/dateFilter.js +9 -14
  43. package/dist/components/DataTable/dateFilter.js.map +1 -1
  44. package/dist/components/DataTable/dayFilter.d.ts +4 -3
  45. package/dist/components/DataTable/dayFilter.d.ts.map +1 -1
  46. package/dist/components/DataTable/dayFilter.js +11 -12
  47. package/dist/components/DataTable/dayFilter.js.map +1 -1
  48. package/dist/components/DataTable/filterKeys.d.ts +1 -1
  49. package/dist/components/DataTable/filterKeys.d.ts.map +1 -1
  50. package/dist/components/DataTable/index.d.ts +8 -3
  51. package/dist/components/DataTable/index.d.ts.map +1 -1
  52. package/dist/components/DataTable/numberFilter.d.ts +16 -3
  53. package/dist/components/DataTable/numberFilter.d.ts.map +1 -1
  54. package/dist/components/DataTable/numberFilter.js +41 -13
  55. package/dist/components/DataTable/numberFilter.js.map +1 -1
  56. package/dist/components/DataTable/presenceFilter.d.ts +4 -1
  57. package/dist/components/DataTable/presenceFilter.d.ts.map +1 -1
  58. package/dist/components/DataTable/presenceFilter.js +3 -3
  59. package/dist/components/DataTable/presenceFilter.js.map +1 -1
  60. package/dist/components/DataTable/scopedFilter.d.ts +2 -0
  61. package/dist/components/DataTable/scopedFilter.d.ts.map +1 -1
  62. package/dist/components/DataTable/scopedFilter.js +6 -3
  63. package/dist/components/DataTable/scopedFilter.js.map +1 -1
  64. package/dist/components/DataTable/textFilter.d.ts +3 -1
  65. package/dist/components/DataTable/textFilter.d.ts.map +1 -1
  66. package/dist/components/DataTable/textFilter.js +5 -9
  67. package/dist/components/DataTable/textFilter.js.map +1 -1
  68. package/dist/components/DataTable/useSearchFilter.d.ts +1 -1
  69. package/dist/components/DataTable/utils.d.ts +1 -0
  70. package/dist/components/DataTable/utils.d.ts.map +1 -1
  71. package/dist/components/DataTable/utils.js +1 -1
  72. package/dist/components/DataTable/utils.js.map +1 -1
  73. package/dist/components/segmented-control/IconSegment.d.ts +6 -1
  74. package/dist/components/segmented-control/IconSegment.d.ts.map +1 -1
  75. package/dist/components/segmented-control/IconSegment.js +1 -1
  76. package/dist/components/segmented-control/IconSegment.js.map +1 -1
  77. package/dist/components/segmented-control/Segment.d.ts +6 -1
  78. package/dist/components/segmented-control/Segment.d.ts.map +1 -1
  79. package/dist/components/segmented-control/Segment.js +1 -1
  80. package/dist/components/segmented-control/Segment.js.map +1 -1
  81. package/dist/components/segmented-control/SegmentBase.d.ts +1 -5
  82. package/dist/components/segmented-control/SegmentBase.d.ts.map +1 -1
  83. package/dist/components/segmented-control/SegmentBase.js.map +1 -1
  84. package/dist/components/segmented-control/SegmentedControl.d.ts +3 -9
  85. package/dist/components/segmented-control/SegmentedControl.d.ts.map +1 -1
  86. package/dist/components/segmented-control/SegmentedControl.js +3 -9
  87. package/dist/components/segmented-control/SegmentedControl.js.map +1 -1
  88. package/dist/components/segmented-control/index.d.ts +1 -0
  89. package/dist/components/segmented-control/index.d.ts.map +1 -1
  90. package/dist/index.css +155 -0
  91. package/dist/index.css.map +1 -1
  92. package/dist/index.d.ts +1 -0
  93. package/dist/index.d.ts.map +1 -1
  94. package/dist/index.js +3 -0
  95. package/dist/index.js.map +1 -1
  96. package/dist/reactRender.css +1537 -1395
  97. package/dist/reactRender.css.map +1 -1
  98. package/dist/reactRenderLegacy.css +1537 -1395
  99. package/dist/reactRenderLegacy.css.map +1 -1
  100. package/dist/unstable.css +171 -29
  101. package/dist/unstable.css.map +1 -1
  102. package/dist/unstable.d.ts +0 -1
  103. package/dist/unstable.d.ts.map +1 -1
  104. package/dist/unstable.js +3 -3
  105. package/package.json +2 -2
@@ -677,6 +677,201 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
+ .tds-checkbox{
681
+ --tds-checkbox-font-size:var(--t-font-size-md);
682
+ --tds-checkbox-cursor:pointer;
683
+ --tds-checkbox-line-height:1.4;
684
+ --tds-checkbox-transition-property:background-color, border-color;
685
+
686
+ --tds-checkbox-input-size:var(--t-element-size-md);
687
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
688
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
689
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
690
+
691
+ --tds-checkbox-input-icon:none;
692
+ --tds-checkbox-input-icon-visibility:hidden;
693
+ --tds-checkbox-input-icon-opacity:0;
694
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
695
+
696
+ --tds-checkbox-label-color:var(--t-form-color);
697
+
698
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
699
+ --tds-checkbox-description-line-height:1.35;
700
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
701
+ --tds-checkbox-description-invalid-icon-display:none;
702
+
703
+ position:relative;
704
+ display:inline-grid;
705
+ grid-template-columns:auto;
706
+ grid-auto-columns:1fr;
707
+ gap:var(--t-spacing-fourth) 0;
708
+ line-height:var(--tds-checkbox-line-height);
709
+ -webkit-user-select:none;
710
+ -moz-user-select:none;
711
+ user-select:none;
712
+ }
713
+
714
+ .tds-checkbox label{
715
+ grid-area:1 / 2;
716
+ padding-inline-start:var(--t-spacing-1);
717
+ font-size:var(--tds-checkbox-font-size);
718
+ font-weight:var(--t-font-weight-normal);
719
+ color:var(--tds-checkbox-label-color);
720
+ cursor:var(--tds-checkbox-cursor);
721
+ }
722
+
723
+ .tds-checkbox tds-indeterminate{
724
+ display:flex;
725
+ }
726
+
727
+ .tds-checkbox input[type="checkbox"]{
728
+ position:relative;
729
+ width:1em;
730
+ height:1em;
731
+ margin:calc((1lh - 1em) / 2) 0 0;
732
+ font-size:var(--tds-checkbox-font-size);
733
+ line-height:inherit;
734
+ -webkit-appearance:none;
735
+ -moz-appearance:none;
736
+ appearance:none;
737
+ cursor:var(--tds-checkbox-cursor);
738
+ background-color:var(--tds-checkbox-input-background-color);
739
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
740
+ border-radius:var(--tds-checkbox-input-border-radius);
741
+ transition-timing-function:var(--t-ease-in-out);
742
+ transition-duration:var(--t-duration-200);
743
+ transition-property:var(--tds-checkbox-transition-property);
744
+ }
745
+
746
+ :is(.tds-checkbox input[type="checkbox"])::before{
747
+ position:absolute;
748
+ top:50%;
749
+ left:50%;
750
+ visibility:var(--tds-checkbox-input-icon-visibility);
751
+ width:100%;
752
+ height:100%;
753
+ content:"";
754
+ background-color:var(--tds-checkbox-input-icon-fill);
755
+ border-radius:var(--tds-checkbox-input-border-radius);
756
+ opacity:var(--tds-checkbox-input-icon-opacity);
757
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
758
+ mask-image:var(--tds-checkbox-input-icon);
759
+ -webkit-mask-repeat:no-repeat;
760
+ mask-repeat:no-repeat;
761
+ -webkit-mask-size:contain;
762
+ mask-size:contain;
763
+ transform:translate(-50%, -50%);
764
+ }
765
+
766
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
767
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
768
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
769
+ }
770
+
771
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
772
+ outline:var(--t-focus-ring-outline);
773
+ outline-offset:var(--t-focus-ring-offset);
774
+ }
775
+
776
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
777
+ pointer-events:none;
778
+ }
779
+
780
+ @media (prefers-reduced-motion: reduce){
781
+
782
+ .tds-checkbox input[type="checkbox"]{
783
+ --tds-checkbox-transition-property:none;
784
+ }
785
+ }
786
+
787
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
788
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
789
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
790
+ --tds-checkbox-input-icon-visibility:visible;
791
+ --tds-checkbox-input-icon-opacity:1;
792
+ }
793
+
794
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
795
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
796
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
797
+ }
798
+
799
+ .tds-checkbox:has(input:checked){
800
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
801
+ }
802
+
803
+ .tds-checkbox:has(input:indeterminate){
804
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
805
+ }
806
+
807
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
808
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
809
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
810
+ --tds-checkbox-description-invalid-icon-display:inline-block;
811
+ }
812
+
813
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
814
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
815
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
816
+ }
817
+
818
+ :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{
819
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
820
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
821
+ }
822
+
823
+ :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){
824
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
825
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
826
+ }
827
+
828
+ .tds-checkbox:has(input:required) label::after{
829
+ margin-left:.25ch;
830
+ color:var(--t-text-color-status-error);
831
+ content:"*";
832
+ }
833
+
834
+ .tds-checkbox:has(input:disabled){
835
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
836
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
837
+
838
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
839
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
840
+ --tds-checkbox-cursor:not-allowed;
841
+ }
842
+
843
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
844
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
845
+ }
846
+
847
+ .tds-checkbox-description{
848
+ display:flex;
849
+ grid-area:2 / 2;
850
+ gap:var(--t-spacing-half);
851
+ align-items:flex-start;
852
+ padding-inline-start:var(--t-spacing-1);
853
+ margin:0;
854
+ font-size:var(--tds-checkbox-description-font-size);
855
+ line-height:var(--tds-checkbox-description-line-height);
856
+ color:var(--tds-checkbox-description-color);
857
+ cursor:text;
858
+ }
859
+
860
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
861
+ display:var(--tds-checkbox-description-invalid-icon-display);
862
+ flex-shrink:0;
863
+ margin-top:calc(.5lh - .5em);
864
+ line-height:var(--tds-checkbox-description-line-height);
865
+ }
866
+
867
+ .tds-checkbox--sm{
868
+ --tds-checkbox-line-height:1.35;
869
+ --tds-checkbox-input-size:var(--t-element-size-sm);
870
+ --tds-checkbox-font-size:var(--t-font-size-sm);
871
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
872
+ --tds-checkbox-description-line-height:1.3;
873
+ }
874
+
680
875
  @layer t-critical{
681
876
  tds-page-header:not(.hydrated){
682
877
  display:none;
@@ -954,822 +1149,757 @@
954
1149
  }
955
1150
  }
956
1151
 
957
- .tds-button-group{
958
- display:inline-flex;
1152
+ .tds-currency-input-control{
1153
+ display:flex;
1154
+ gap:var(--t-spacing-half);
1155
+ align-items:center;
1156
+ inline-size:100%;
1157
+ min-block-size:var(--tds-field-min-height);
1158
+ padding-inline:var(--tds-field-padding-inline);
1159
+ font-size:var(--tds-field-font-size);
1160
+ color:var(--tds-field-color);
1161
+ cursor:text;
1162
+ outline:var(--t-focus-ring-width) solid transparent;
1163
+ background-color:var(--tds-field-background-color);
1164
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
1165
+ border-radius:var(--t-form-border-radius);
1166
+ transition-timing-function:var(--t-ease-in-out);
1167
+ transition-duration:var(--t-duration-200);
1168
+ transition-property:background-color, border-color, outline-color, outline-offset;
959
1169
  }
960
- .tds-button-group > .tds-btn{
961
- --tds-button-group-item-z-index:1;
962
1170
 
963
- position:relative;
964
- z-index:var(--tds-button-group-item-z-index);
965
- border-radius:0;
966
- }
967
- :is(.tds-button-group > .tds-btn):not(:first-child){
968
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
969
- }
970
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
971
- position:absolute;
972
- inset-block:calc(var(--tds-btn-border-width) * -1);
973
- width:var(--tds-btn-border-width);
974
- pointer-events:none;
975
- content:"";
976
- background-color:var(--t-border-color-white);
977
- }
978
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
979
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
980
- }
981
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
982
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
983
- }
984
- :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
985
- --tds-button-group-item-z-index:2;
986
- }
987
- :is(.tds-button-group > .tds-btn):focus-visible{
988
- --tds-button-group-item-z-index:5;
989
- }
990
- .tds-button-group > .tds-btn:first-child{
991
- border-start-start-radius:var(--tds-btn-border-radius);
992
- border-end-start-radius:var(--tds-btn-border-radius);
1171
+ .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1172
+ border-color:var(--tds-field-border-color-hover);
993
1173
  }
994
- .tds-button-group > .tds-btn:last-child{
995
- border-start-end-radius:var(--tds-btn-border-radius);
996
- border-end-end-radius:var(--tds-btn-border-radius);
1174
+
1175
+ .tds-currency-input-control:has(input:focus){
1176
+ outline-color:var(--t-focus-ring-color);
1177
+ outline-offset:var(--t-focus-ring-offset);
1178
+ border-color:var(--tds-field-border-color-active);
997
1179
  }
998
1180
 
999
- .tds-checkbox-group{
1000
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1001
- --tds-checkbox-group-line-height:1.4;
1002
- --tds-checkbox-group-gap:var(--t-spacing-1);
1003
-
1004
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1005
- --tds-checkbox-group-description-line-height:1.35;
1006
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1007
- --tds-checkbox-group-description-invalid-icon-display:none;
1008
- display:flex;
1009
- flex-direction:column;
1010
- gap:0;
1011
- padding:0;
1012
- margin:0;
1013
-
1014
- font-size:var(--tds-checkbox-group-font-size);
1015
- line-height:var(--tds-checkbox-group-line-height);
1016
- border:0;
1017
- }
1018
-
1019
- .tds-checkbox-group legend{
1020
- float:left;
1181
+ .tds-currency-input-control input{
1182
+ flex:1;
1183
+ min-inline-size:0;
1021
1184
  padding:0;
1022
- margin:0;
1023
- }
1024
-
1025
- .tds-checkbox-group[aria-invalid="true"]{
1026
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1027
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1028
- }
1029
-
1030
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1031
- margin-left:.25ch;
1032
- color:var(--t-text-color-status-error);
1033
- content:"*";
1034
- }
1035
-
1036
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1037
- content:none;
1038
- }
1039
-
1040
- .tds-checkbox-group-fields{
1041
- display:flex;
1042
- flex-direction:column;
1043
- gap:var(--tds-checkbox-group-gap);
1044
- align-items:flex-start;
1045
- margin-top:var(--t-spacing-1);
1046
- }
1047
-
1048
- .tds-checkbox-group-description{
1049
- display:flex;
1050
- gap:var(--t-spacing-half);
1051
- align-items:flex-start;
1052
- margin:var(--t-spacing-fourth) 0 0;
1053
- font-size:var(--tds-checkbox-group-description-font-size);
1054
- line-height:var(--tds-checkbox-group-description-line-height);
1055
- color:var(--tds-checkbox-group-description-color);
1056
- cursor:text;
1057
- }
1058
-
1059
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1060
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1061
- flex-shrink:0;
1062
- margin-top:calc(.5lh - .5em);
1063
- line-height:var(--tds-checkbox-group-description-line-height);
1064
- }
1065
-
1066
- .tds-checkbox-group--sm{
1067
- --tds-checkbox-group-line-height:1.35;
1068
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1069
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1070
- --tds-checkbox-group-description-line-height:1.3;
1071
- }
1072
-
1073
- .tds-checkbox{
1074
- --tds-checkbox-font-size:var(--t-font-size-md);
1075
- --tds-checkbox-cursor:pointer;
1076
- --tds-checkbox-line-height:1.4;
1077
- --tds-checkbox-transition-property:background-color, border-color;
1078
-
1079
- --tds-checkbox-input-size:var(--t-element-size-md);
1080
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1081
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1082
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1083
-
1084
- --tds-checkbox-input-icon:none;
1085
- --tds-checkbox-input-icon-visibility:hidden;
1086
- --tds-checkbox-input-icon-opacity:0;
1087
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1088
-
1089
- --tds-checkbox-label-color:var(--t-form-color);
1090
-
1091
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1092
- --tds-checkbox-description-line-height:1.35;
1093
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1094
- --tds-checkbox-description-invalid-icon-display:none;
1095
-
1096
- position:relative;
1097
- display:inline-grid;
1098
- grid-template-columns:auto;
1099
- grid-auto-columns:1fr;
1100
- gap:var(--t-spacing-fourth) 0;
1101
- line-height:var(--tds-checkbox-line-height);
1102
- -webkit-user-select:none;
1103
- -moz-user-select:none;
1104
- user-select:none;
1105
- }
1106
-
1107
- .tds-checkbox label{
1108
- grid-area:1 / 2;
1109
- padding-inline-start:var(--t-spacing-1);
1110
- font-size:var(--tds-checkbox-font-size);
1111
- font-weight:var(--t-font-weight-normal);
1112
- color:var(--tds-checkbox-label-color);
1113
- cursor:var(--tds-checkbox-cursor);
1114
- }
1115
-
1116
- .tds-checkbox tds-indeterminate{
1117
- display:flex;
1118
- }
1119
-
1120
- .tds-checkbox input[type="checkbox"]{
1121
- position:relative;
1122
- width:1em;
1123
- height:1em;
1124
- margin:calc((1lh - 1em) / 2) 0 0;
1125
- font-size:var(--tds-checkbox-font-size);
1126
- line-height:inherit;
1185
+ font-family:inherit;
1186
+ font-size:inherit;
1187
+ color:inherit;
1127
1188
  -webkit-appearance:none;
1128
1189
  -moz-appearance:none;
1129
1190
  appearance:none;
1130
- cursor:var(--tds-checkbox-cursor);
1131
- background-color:var(--tds-checkbox-input-background-color);
1132
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1133
- border-radius:var(--tds-checkbox-input-border-radius);
1134
- transition-timing-function:var(--t-ease-in-out);
1135
- transition-duration:var(--t-duration-200);
1136
- transition-property:var(--tds-checkbox-transition-property);
1191
+ outline:0;
1192
+ background-color:transparent;
1193
+ border:0;
1137
1194
  }
1138
1195
 
1139
- :is(.tds-checkbox input[type="checkbox"])::before{
1140
- position:absolute;
1141
- top:50%;
1142
- left:50%;
1143
- visibility:var(--tds-checkbox-input-icon-visibility);
1144
- width:100%;
1145
- height:100%;
1146
- content:"";
1147
- background-color:var(--tds-checkbox-input-icon-fill);
1148
- border-radius:var(--tds-checkbox-input-border-radius);
1149
- opacity:var(--tds-checkbox-input-icon-opacity);
1150
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1151
- mask-image:var(--tds-checkbox-input-icon);
1152
- -webkit-mask-repeat:no-repeat;
1153
- mask-repeat:no-repeat;
1154
- -webkit-mask-size:contain;
1155
- mask-size:contain;
1156
- transform:translate(-50%, -50%);
1157
- }
1158
-
1159
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1160
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1161
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1162
- }
1163
-
1164
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1165
- outline:var(--t-focus-ring-outline);
1166
- outline-offset:var(--t-focus-ring-offset);
1167
- }
1168
-
1169
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1170
- pointer-events:none;
1196
+ :is(.tds-currency-input-control input)::-moz-placeholder{
1197
+ color:var(--tds-field-placeholder-color);
1198
+ -moz-user-select:none;
1199
+ user-select:none;
1171
1200
  }
1172
1201
 
1173
- @media (prefers-reduced-motion: reduce){
1174
-
1175
- .tds-checkbox input[type="checkbox"]{
1176
- --tds-checkbox-transition-property:none;
1177
- }
1202
+ :is(.tds-currency-input-control input)::placeholder{
1203
+ color:var(--tds-field-placeholder-color);
1204
+ -webkit-user-select:none;
1205
+ -moz-user-select:none;
1206
+ user-select:none;
1178
1207
  }
1179
1208
 
1180
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1181
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1182
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1183
- --tds-checkbox-input-icon-visibility:visible;
1184
- --tds-checkbox-input-icon-opacity:1;
1209
+ .tds-currency-input-control .tds-currency-input-prefix{
1210
+ flex-shrink:0;
1211
+ color:var(--t-text-color-secondary);
1212
+ pointer-events:none;
1213
+ -webkit-user-select:none;
1214
+ -moz-user-select:none;
1215
+ user-select:none;
1185
1216
  }
1186
1217
 
1187
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1188
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1189
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1190
- }
1191
-
1192
- .tds-checkbox:has(input:checked){
1193
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1218
+ .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
1219
+ --tds-field-background-color:var(--t-form-background-color-error);
1220
+ --tds-field-border-color:var(--t-form-border-color-error);
1221
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1194
1222
  }
1195
1223
 
1196
- .tds-checkbox:has(input:indeterminate){
1197
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1198
- }
1224
+ .tds-currency-input-control:has(:disabled){
1225
+ --tds-field-border-color:var(--t-form-border-color-disabled);
1226
+ --tds-field-background-color:var(--t-form-background-color-disabled);
1227
+ --tds-field-color:var(--t-form-color-disabled);
1199
1228
 
1200
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1201
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1202
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1203
- --tds-checkbox-description-invalid-icon-display:inline-block;
1229
+ cursor:not-allowed;
1204
1230
  }
1205
1231
 
1206
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1207
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1208
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1209
- }
1210
-
1211
- :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{
1212
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1213
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1214
- }
1215
-
1216
- :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){
1217
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1218
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1219
- }
1220
-
1221
- .tds-checkbox:has(input:required) label::after{
1222
- margin-left:.25ch;
1223
- color:var(--t-text-color-status-error);
1224
- content:"*";
1232
+ .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
1233
+ color:var(--tds-field-color);
1225
1234
  }
1226
1235
 
1227
- .tds-checkbox:has(input:disabled){
1228
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1229
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1230
-
1231
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1232
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1233
- --tds-checkbox-cursor:not-allowed;
1236
+ .tds-currency-input-control:has([readonly]){
1237
+ --tds-field-border-color:var(--t-form-border-color-readonly);
1238
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1239
+ --tds-field-background-color:var(--t-form-background-color-readonly);
1240
+ --tds-field-color:var(--t-form-color-readonly);
1234
1241
  }
1235
1242
 
1236
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1237
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1243
+ .tds-currency-input-control:has([readonly]):has(input:focus){
1244
+ border-color:var(--t-form-border-color-hover);
1238
1245
  }
1246
+ .tds-currency-input-currency-name--hidden{
1247
+ position:absolute;
1248
+ width:1px;
1249
+ height:1px;
1250
+ overflow:hidden;
1251
+ white-space:nowrap;
1252
+ clip-path:inset(50%);
1253
+ }
1239
1254
 
1240
- .tds-checkbox-description{
1241
- display:flex;
1242
- grid-area:2 / 2;
1243
- gap:var(--t-spacing-half);
1244
- align-items:flex-start;
1245
- padding-inline-start:var(--t-spacing-1);
1246
- margin:0;
1247
- font-size:var(--tds-checkbox-description-font-size);
1248
- line-height:var(--tds-checkbox-description-line-height);
1249
- color:var(--tds-checkbox-description-color);
1250
- cursor:text;
1255
+ .tds-modal-overlay{
1256
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1257
+
1258
+ position:fixed;
1259
+ inset:0;
1260
+ z-index:1000;
1261
+ display:grid;
1262
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1263
+ justify-items:center;
1264
+ overflow-y:auto;
1265
+ background:hsl(0 0% 0% / 40%);
1251
1266
  }
1252
1267
 
1253
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1254
- display:var(--tds-checkbox-description-invalid-icon-display);
1255
- flex-shrink:0;
1256
- margin-top:calc(.5lh - .5em);
1257
- line-height:var(--tds-checkbox-description-line-height);
1268
+ .tds-modal-overlay[data-entering]{
1269
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1258
1270
  }
1259
1271
 
1260
- .tds-checkbox--sm{
1261
- --tds-checkbox-line-height:1.35;
1262
- --tds-checkbox-input-size:var(--t-element-size-sm);
1263
- --tds-checkbox-font-size:var(--t-font-size-sm);
1264
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1265
- --tds-checkbox-description-line-height:1.3;
1266
- }
1272
+ .tds-modal-overlay[data-exiting]{
1273
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1274
+ }
1267
1275
 
1276
+ @keyframes tds-modal-overlay-fade{
1277
+ from{
1278
+ opacity:0;
1279
+ }
1280
+ }
1268
1281
 
1269
- @media (prefers-reduced-motion: no-preference){
1282
+ .tds-modal-frame{
1283
+ --tds-modal-width:600px;
1284
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1285
+ display:flex;
1270
1286
 
1271
- :root{
1272
- interpolate-size:allow-keywords;
1287
+ grid-row:2;
1288
+ justify-content:center;
1289
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1273
1290
  }
1274
- }
1275
-
1276
- @layer tds-component{
1277
- tds-sidenav,
1278
- .tds-sidenav{
1279
- --tds-sidenav-indent:12px;
1280
- --tds-sidenav-item-depth:0;
1281
1291
 
1282
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1292
+ .tds-modal-frame[data-entering]{
1293
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1294
+ }
1283
1295
 
1284
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1285
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1286
- --tds-sidenav-collapse-closed-opacity:0;
1287
- --tds-sidenav-collapse-open-opacity:1;
1288
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
1289
- --tds-sidenav-collapse-open-transform:translateY(0);
1296
+ .tds-modal-frame[data-exiting]{
1297
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1298
+ }
1290
1299
 
1291
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
1292
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1293
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1294
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1300
+ .tds-modal-frame--sm{
1301
+ --tds-modal-width:400px;
1302
+ }
1295
1303
 
1296
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1297
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1298
- --tds-sidenav-item-nested-background-selected:transparent;
1304
+ .tds-modal-frame--lg{
1305
+ --tds-modal-width:800px;
1306
+ }
1299
1307
 
1300
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1301
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1302
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1308
+ .tds-modal-frame--xl{
1309
+ --tds-modal-width:1000px;
1310
+ }
1303
1311
 
1304
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1305
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1312
+ @keyframes tds-modal-zoom{
1313
+ from{
1314
+ opacity:0;
1315
+ scale:.96;
1306
1316
  }
1317
+ }
1307
1318
 
1308
- @media (prefers-reduced-motion: reduce){
1309
- tds-sidenav,
1310
- .tds-sidenav{
1311
- --tds-sidenav-collapse-transition-enter:none;
1312
- --tds-sidenav-collapse-transition-exit:none;
1313
- --tds-sidenav-collapse-closed-transform:none;
1314
- --tds-sidenav-collapse-open-transform:none;
1319
+ @media (prefers-reduced-motion: reduce){
1320
+ .tds-modal-overlay[data-entering],
1321
+ .tds-modal-overlay[data-exiting],
1322
+ .tds-modal-frame[data-entering],
1323
+ .tds-modal-frame[data-exiting]{
1324
+ animation:none;
1315
1325
  }
1316
- }
1326
+ }
1317
1327
 
1318
- .tds-sidenav--theme-gray{
1319
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1320
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1321
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1322
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1323
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1324
- }
1328
+ .tds-modal{
1329
+ display:flex;
1330
+ flex-direction:column;
1331
+ width:100%;
1332
+ padding-block-start:var(--t-spacing-3);
1333
+ padding-inline:0;
1334
+ background:var(--t-surface-color-card);
1335
+
1336
+ border:0;
1337
+ border-radius:var(--t-border-radius-lg);
1338
+ box-shadow:0 4px 18px 0 #0003;
1325
1339
  }
1326
1340
 
1327
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1328
- display:flex;
1341
+ .tds-modal:focus{
1342
+ outline:none;
1329
1343
  }
1330
1344
 
1331
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1332
- flex-direction:column;
1333
- gap:var(--t-spacing-half);
1334
- width:100%;
1335
- }
1345
+ .tds-modal-header{
1346
+ display:grid;
1347
+ grid-template-columns:1fr auto;
1348
+ -moz-column-gap:var(--t-spacing-2);
1349
+ column-gap:var(--t-spacing-2);
1350
+ padding-block:0;
1351
+ padding-inline:var(--t-spacing-4);
1352
+ }
1336
1353
 
1337
- .tds-sidenav-section-list{
1338
- width:100%;
1339
- padding:0;
1354
+ .tds-modal-title{
1355
+ grid-row:1;
1356
+ grid-column:1;
1340
1357
  margin:0;
1341
- list-style:none;
1358
+ font-size:var(--t-font-size-2xl);
1359
+ font-weight:var(--t-font-weight-medium);
1360
+ line-height:140%;
1361
+ color:var(--t-text-color-headline);
1342
1362
  }
1343
1363
 
1344
- .tds-sidenav-section-header{
1345
- display:flex;
1346
- align-items:baseline;
1347
- justify-content:space-between;
1348
- padding-top:var(--t-spacing-2);
1364
+ .tds-modal-subtitle{
1365
+ grid-row:2;
1366
+ grid-column:1;
1367
+ margin:0;
1368
+ font-size:var(--t-font-size-md);
1369
+ font-weight:var(--t-font-weight-medium);
1370
+ line-height:140%;
1371
+ color:var(--t-text-color-secondary);
1349
1372
  }
1350
1373
 
1351
- .tds-sidenav-section-header h2{
1352
- margin:0;
1353
- font-size:var(--t-font-size-sm);
1354
- font-weight:var(--t-font-weight-semibold);
1355
- line-height:1.35;
1356
- color:var(--t-text-color-secondary);
1357
- text-transform:uppercase;
1358
- }
1374
+ .tds-modal-close{
1375
+ grid-row:1;
1376
+ grid-column:2;
1377
+ align-self:center;
1378
+ color:var(--t-icon-color-dim);
1379
+ }
1359
1380
 
1360
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1361
- padding-top:0;
1362
- }
1381
+ .tds-modal-body{
1382
+ padding-block:var(--t-spacing-3);
1383
+ padding-inline:var(--t-spacing-4);
1384
+ }
1363
1385
 
1364
- .tds-sidenav-section-header [slot="label-actions"]{
1365
- display:flex;
1366
- gap:var(--t-spacing-half);
1367
- align-items:center;
1368
- }
1386
+ .tds-modal-body--full-width{
1387
+ padding-inline:0;
1388
+ }
1369
1389
 
1370
- .tds-sidenav-section [slot="section-actions"]{
1390
+ .tds-modal-footer{
1371
1391
  display:flex;
1372
- gap:12px;
1392
+ gap:var(--t-spacing-2);
1373
1393
  align-items:center;
1374
- min-height:42px;
1375
- padding:var(--t-spacing-1) 0;
1394
+ justify-content:flex-end;
1395
+ padding-block:var(--t-spacing-3);
1396
+ padding-inline:var(--t-spacing-4);
1397
+ border-top:1px solid var(--t-border-color);
1376
1398
  }
1377
1399
 
1378
- .tds-sidenav-section-list,
1379
- .tds-sidenav-item{
1380
- width:100%;
1381
- padding:0;
1382
- margin:0;
1400
+ .tds-modal-footer > [slot="start"]{
1401
+ margin-inline-end:auto;
1383
1402
  }
1384
1403
 
1385
- .tds-sidenav-item :is(a,button){
1386
- position:relative;
1387
- display:flex;
1388
- gap:12px;
1389
- align-items:center;
1390
- width:100%;
1391
- padding:12px;
1392
- overflow:hidden;
1393
- font-size:var(--t-font-size-sm);
1394
- line-height:18px;
1395
- color:var(--t-text-color-headline);
1396
- white-space:nowrap;
1397
- text-decoration:none;
1398
- -webkit-appearance:none;
1399
- -moz-appearance:none;
1400
- appearance:none;
1401
- cursor:pointer;
1402
- background-color:var(--tds-sidenav-item-background, transparent);
1403
- border:0;
1404
- border-radius:var(--t-border-radius);
1405
- transition:var(--tds-sidenav-item-transition);
1404
+ @media (min-width: 720px){
1405
+ .tds-modal-overlay{
1406
+ --tds-modal-min-margin-block:0;
1406
1407
  }
1407
1408
 
1408
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1409
- display:block;
1410
- flex:1;
1411
- overflow:hidden;
1412
- text-overflow:ellipsis;
1413
- text-align:left;
1414
- white-space:nowrap;
1415
- }
1409
+ .tds-modal-footer{
1410
+ position:sticky;
1411
+ bottom:0;
1412
+ background:var(--t-surface-color-card);
1413
+ border-end-start-radius:var(--t-border-radius-lg);
1414
+ border-end-end-radius:var(--t-border-radius-lg);
1415
+ }
1416
+ }
1416
1417
 
1417
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1418
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1419
- color:var(--t-text-color-headline);
1420
- text-decoration:none;
1418
+
1419
+ :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{
1420
+ -webkit-appearance:none;
1421
+ appearance:none;
1421
1422
  }
1422
1423
 
1423
- :is(.tds-sidenav-item :is(a,button)):active{
1424
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1424
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1425
+ inline-size:1em;
1426
+ block-size:2em;
1425
1427
  }
1426
1428
 
1427
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1428
- overflow:hidden;
1429
- color:var(--tds-sidenav-item-icon-color);
1429
+ [type="file"]:is(.tds-input input){
1430
+ padding-block:var(--t-spacing-half);
1431
+ padding-inline-start:var(--t-spacing-half);
1430
1432
  }
1431
1433
 
1432
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
1433
- display:block;
1434
- width:var(--tds-sidenav-item-icon-size);
1435
- height:var(--tds-sidenav-item-icon-size);
1434
+ [type="file"]:is(.tds-input input):not(:disabled){
1435
+ color:var(--t-text-color-secondary);
1436
1436
  }
1437
1437
 
1438
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1439
- --tds-sidenav-indent:19px;
1440
- }
1438
+ [type="file"]:is(.tds-input input)::file-selector-button{
1439
+ --_file-btn-padding-block:3px;
1441
1440
 
1442
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1443
- visibility:visible;
1444
- block-size:auto;
1445
- opacity:1;
1446
- }
1441
+ padding-block:var(--_file-btn-padding-block);
1442
+ padding-inline:12px;
1443
+ margin-inline-end:12px;
1444
+ font:inherit;
1445
+ line-height:calc(var(--tds-input-min-height) - (var(--t-form-border-width) * 2 + var(--t-border-width) * 2 + var(--_file-btn-padding-block) * 2 + var(--t-spacing-half) * 2));
1446
+ color:var(--t-text-color-status-neutral);
1447
+ cursor:pointer;
1448
+ background-color:var(--t-fill-color-button-neutral-solid);
1449
+ border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1450
+ border-radius:var(--t-border-radius-md);
1451
+ transition-timing-function:var(--t-ease-in-out);
1452
+ transition-duration:var(--t-duration-200);
1453
+ transition-property:color, background-color, border-color;
1454
+ }
1447
1455
 
1448
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1449
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1450
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1456
+ [type="file"]:is(.tds-input input):hover::file-selector-button{
1457
+ background-color:var(--t-fill-color-button-neutral-solid-hover);
1458
+ border-color:var(--t-fill-color-button-neutral-solid-hover);
1459
+ }
1451
1460
 
1452
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1453
- font-weight:var(--t-font-weight-semibold);
1454
- }
1461
+ [type="file"]:is(.tds-input input):active::file-selector-button{
1462
+ background-color:var(--t-fill-color-button-neutral-solid-active);
1463
+ border-color:var(--t-fill-color-button-neutral-solid-active);
1464
+ }
1455
1465
 
1456
- .tds-sidenav-item:has(.tds-sidenav-section){
1457
- display:flex;
1458
- flex-direction:column;
1459
- gap:var(--t-spacing-half);
1466
+ [type="file"]:is(.tds-input input):disabled::file-selector-button{
1467
+ color:var(--t-text-color-disabled);
1468
+ pointer-events:none;
1469
+ background-color:var(--t-fill-color-button-neutral-solid-disabled);
1470
+ border-color:var(--t-fill-color-button-neutral-solid-disabled);
1471
+ }
1472
+ @supports (field-sizing: content){
1473
+ .tds-input--auto-width{
1474
+ inline-size:-moz-fit-content;
1475
+ inline-size:fit-content;
1476
+ min-inline-size:min(100%, 122px);
1460
1477
  }
1461
1478
 
1462
- .tds-sidenav-item .tds-sidenav-section-list{
1463
- --tds-sidenav-item-depth:1;
1464
- gap:0;
1479
+ .tds-input--auto-width input{
1480
+ field-sizing:content;
1481
+ inline-size:auto;
1465
1482
  }
1483
+ }
1466
1484
 
1467
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1468
- visibility:hidden;
1469
- block-size:0;
1470
- overflow-y:clip;
1471
- opacity:0;
1472
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1485
+ .tds-popover{
1486
+ max-inline-size:24rem;
1487
+ overflow:auto;
1488
+ overscroll-behavior:none;
1489
+ outline:0;
1490
+ scrollbar-color:#0004 var(--t-surface-color-card);
1491
+ scrollbar-width:thin;
1492
+ background:var(--t-surface-color-card);
1493
+ background-clip:padding-box;
1494
+ border:1px solid var(--t-border-color);
1495
+ border-radius:var(--t-border-radius);
1496
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1497
+ }
1498
+
1499
+ @media (prefers-reduced-motion: no-preference){
1500
+ .tds-popover[data-entering]{
1501
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1473
1502
  }
1474
1503
 
1475
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1476
- --tds-sidenav-item-depth:2;
1504
+ .tds-popover[data-exiting]{
1505
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1477
1506
  }
1478
1507
 
1479
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1480
- min-height:var(--t-element-size-2xl);
1481
- padding-block:9px;
1482
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1483
- line-height:1;
1484
- background-color:transparent;
1508
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
1509
+ will-change:opacity, transform;
1485
1510
  }
1486
1511
 
1487
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1488
- position:absolute;
1489
- top:0;
1490
- bottom:0;
1491
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1492
- width:2px;
1493
- content:"";
1494
- background-color:var(--tds-sidenav-item-nested-border-color);
1495
- transition:var(--tds-sidenav-item-transition);
1496
- }
1512
+ @keyframes tds-popover{
1513
+ from{
1514
+ opacity:0;
1515
+ transform:translateY(-8px);
1516
+ }
1517
+ }
1518
+ }
1497
1519
 
1498
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1499
- position:absolute;
1500
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1501
- z-index:-1;
1502
- height:100%;
1503
- content:"";
1504
- background-color:var(--tds-sidenav-item-nested-background);
1505
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1506
- transition:var(--tds-sidenav-item-transition);
1507
- }
1520
+ .tds-popover-content{
1521
+ display:flex;
1522
+ flex-direction:column;
1523
+ padding:var(--t-spacing-1);
1524
+ outline:0;
1525
+ }
1508
1526
 
1509
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1510
- display:block;
1511
- text-align:left;
1512
- white-space:normal;
1513
- }
1527
+ .tds-segmented-control{
1528
+ --tds-segmented-control-font-size:var(--t-font-size-md);
1529
+ --tds-segmented-control-padding:var(--t-spacing-half);
1530
+ --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
1531
+ --tds-segmented-control-icon-size:.66666667lh;
1532
+ --tds-segmented-control-border-radius:var(--t-border-radius-md);
1533
+ --tds-segmented-control-max-width:280px;
1534
+ --tds-segmented-control-min-height:var(--t-container-size-md);
1535
+ --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
1536
+ --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
1537
+ --tds-segmented-control-width:fit-content;
1514
1538
 
1515
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1516
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1517
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1518
- }
1539
+ display:flex;
1540
+ flex-direction:column;
1541
+ gap:var(--t-spacing-half);
1542
+ align-items:flex-start;
1543
+ width:var(--tds-segmented-control-width);
1544
+ }
1519
1545
 
1520
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1521
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1522
- }
1546
+ .tds-segmented-control--sm{
1547
+ --tds-segmented-control-font-size:var(--t-font-size-sm);
1548
+ --tds-segmented-control-padding-inline:7px;
1549
+ --tds-segmented-control-min-height:var(--t-container-size-sm);
1550
+ }
1523
1551
 
1524
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1525
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1526
- font-weight:var(--t-font-weight-medium);
1527
- }
1552
+ .tds-segmented-control--full-width{
1553
+ --tds-segmented-control-width:100%;
1554
+ --tds-segmented-control-max-width:none;
1555
+ }
1528
1556
 
1529
- .tds-sidenav-responsive-header{
1530
- display:flex;
1531
- gap:var(--t-spacing-2);
1557
+ .tds-segmented-control--full-width .tds-segmented-control-segment{
1558
+ flex:1 1 0;
1559
+ }
1560
+
1561
+ .tds-segmented-control-label{
1562
+ font-size:var(--tds-segmented-control-font-size);
1563
+ font-weight:var(--t-font-weight-normal);
1564
+ color:var(--t-text-color-headline);
1565
+ }
1566
+
1567
+ .tds-segmented-control-label--hidden{
1568
+ position:absolute;
1569
+ width:1px;
1570
+ height:1px;
1571
+ overflow:hidden;
1572
+ white-space:nowrap;
1573
+ clip-path:inset(50%);
1574
+ }
1575
+
1576
+ .tds-segmented-control-track{
1577
+ display:inline-flex;
1578
+ gap:var(--tds-segmented-control-track-gap);
1579
+ width:var(--tds-segmented-control-width);
1580
+ padding:var(--tds-segmented-control-padding);
1581
+ background-color:var(--t-form-background-color);
1582
+ border:1px solid var(--t-border-color);
1583
+ border-radius:var(--tds-segmented-control-border-radius);
1584
+ }
1585
+
1586
+ .tds-segmented-control-segment{
1587
+ --tds-segmented-control-color:var(--t-text-color-status-neutral);
1588
+ --tds-segmented-control-background-color:transparent;
1589
+
1590
+ display:inline-flex;
1591
+ gap:var(--t-spacing-1);
1532
1592
  align-items:center;
1533
- width:100%;
1593
+ justify-content:center;
1594
+ max-width:var(--tds-segmented-control-max-width);
1595
+ min-height:var(--tds-segmented-control-min-height);
1596
+ padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
1597
+ padding-inline:var(--tds-segmented-control-padding-inline);
1598
+ font:inherit;
1599
+ font-size:var(--tds-segmented-control-font-size);
1600
+ color:var(--tds-segmented-control-color);
1601
+ text-align:center;
1602
+ cursor:pointer;
1603
+ -webkit-user-select:none;
1604
+ -moz-user-select:none;
1605
+ user-select:none;
1606
+ background-color:var(--tds-segmented-control-background-color);
1607
+ border:0;
1608
+ border-radius:var(--t-border-radius-sm);
1609
+ transition-timing-function:var(--t-ease-in-out);
1610
+ transition-duration:var(--t-duration-200);
1611
+ transition-property:color, background-color;
1534
1612
  }
1535
1613
 
1536
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1537
- order:0;
1614
+ .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
1615
+ padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
1616
+ }
1617
+
1618
+ .tds-segmented-control-segment .symbol{
1619
+ display:block;
1620
+ flex-shrink:0;
1621
+ width:var(--tds-segmented-control-icon-size);
1622
+ height:var(--tds-segmented-control-icon-size);
1538
1623
  }
1539
1624
 
1540
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1541
- flex:1;
1542
- order:1;
1543
- margin:0;
1544
- font-size:var(--t-font-size-lg);
1545
- font-weight:var(--t-font-weight-medium);
1546
- color:var(--t-text-color-headline);
1625
+ .tds-segmented-control-segment:focus-visible{
1626
+ outline:var(--t-focus-ring-outline);
1627
+ outline-offset:var(--t-focus-ring-offset);
1547
1628
  }
1548
1629
 
1549
- @media (max-width: 719px){
1550
- .tds-sidenav-collapse{
1551
- z-index:10001;
1552
- display:none;
1553
- max-width:min(448px, calc(100vw - 48px));
1554
- padding:0;
1555
- margin:12px 0;
1556
- position-area:bottom span-right;
1557
- overflow:hidden;
1558
- outline:0;
1559
- background:var(--t-surface-color-card);
1560
- border:0;
1561
- border-radius:6px;
1562
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1563
- opacity:var(--tds-sidenav-collapse-open-opacity);
1564
- transform:var(--tds-sidenav-collapse-open-transform);
1565
- transition:var(--tds-sidenav-collapse-transition-enter);
1566
- will-change:transform;
1630
+ .tds-segmented-control-segment:hover{
1631
+ --tds-segmented-control-background-color:var(--t-fill-color-button-neutral-ghost-hover);
1567
1632
  }
1568
1633
 
1569
- .tds-sidenav-scroll-container{
1570
- --webkit-overflow-scrolling:touch;
1571
- display:block;
1572
- width:100%;
1573
- height:-moz-fit-content;
1574
- height:fit-content;
1575
- padding:var(--t-spacing-2);
1576
- overflow-y:auto;
1577
- }
1634
+ .tds-segmented-control-segment[aria-checked="true"]{
1635
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
1636
+ --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
1578
1637
 
1579
- .tds-sidenav-item :is(a, button) :is(.prefix){
1580
- display:none;
1638
+ cursor:default;
1581
1639
  }
1582
- @supports selector(:popover-open){
1583
- .tds-sidenav-collapse:popover-open{
1584
- display:flex;
1585
- }
1586
1640
 
1587
- .tds-sidenav-collapse:not(:popover-open){
1588
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1589
- transition:var(--tds-sidenav-collapse-transition-exit);
1590
- }
1641
+ .tds-segmented-control-segment:disabled{
1642
+ --tds-segmented-control-background-color:transparent;
1643
+ --tds-segmented-control-color:var(--t-text-color-disabled);
1591
1644
 
1592
- @starting-style{
1593
- .tds-sidenav-collapse:popover-open{
1594
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1595
- transform:var(--tds-sidenav-collapse-closed-transform);
1596
- }
1597
- }
1645
+ pointer-events:none;
1598
1646
  }
1599
- @supports not selector(:popover-open){
1600
- .tds-sidenav-collapse.\:popover-open{
1601
- display:flex;
1602
- }
1603
1647
 
1604
- .tds-sidenav-collapse:not(.\:popover-open){
1605
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1606
- transition:var(--tds-sidenav-collapse-transition-exit);
1648
+ .tds-segmented-control-segment[aria-checked="true"]:disabled{
1649
+ --tds-segmented-control-background-color:var(--t-fill-color-button-neutral-solid-disabled);
1607
1650
  }
1608
- }
1651
+
1652
+ .tds-segmented-control-segment--neutral-subtle{
1653
+ --tds-segmented-control-color-checked:var(--t-text-color-status-neutral);
1654
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-button-neutral-solid-hover);
1609
1655
  }
1610
1656
 
1611
- @media (min-width: 720px){
1612
- .tds-sidenav-responsive-header{
1613
- display:none;
1614
- }
1657
+ .tds-segmented-control-segment--interaction-subtle{
1658
+ --tds-segmented-control-color-checked:var(--t-text-color-interaction);
1659
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
1615
1660
  }
1616
1661
 
1617
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1618
- display:none;
1619
- }
1662
+ .tds-segmented-control-segment--interaction-bold{
1663
+ --tds-segmented-control-color-checked:var(--t-text-color-inverted);
1664
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-solid);
1665
+ }
1620
1666
 
1621
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1622
- display:block;
1623
- }
1667
+ .tds-segmented-control-segment--success{
1668
+ --tds-segmented-control-color-checked:var(--t-text-color-status-success);
1669
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-status-success-ghost);
1670
+ }
1624
1671
 
1625
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1626
- display:flex;
1627
- flex-direction:column;
1628
- }
1672
+ .tds-segmented-control-segment--warning{
1673
+ --tds-segmented-control-color-checked:var(--t-text-color-status-warning);
1674
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-status-warning-ghost);
1675
+ }
1629
1676
 
1630
- .tds-currency-input-control{
1631
- display:flex;
1632
- gap:var(--t-spacing-half);
1633
- align-items:center;
1634
- inline-size:100%;
1635
- min-block-size:var(--tds-field-min-height);
1636
- padding-inline:var(--tds-field-padding-inline);
1637
- font-size:var(--tds-field-font-size);
1638
- color:var(--tds-field-color);
1639
- cursor:text;
1640
- outline:var(--t-focus-ring-width) solid transparent;
1641
- background-color:var(--tds-field-background-color);
1642
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
1643
- border-radius:var(--t-form-border-radius);
1644
- transition-timing-function:var(--t-ease-in-out);
1645
- transition-duration:var(--t-duration-200);
1646
- transition-property:background-color, border-color, outline-color, outline-offset;
1677
+ .tds-segmented-control-segment--error{
1678
+ --tds-segmented-control-color-checked:var(--t-text-color-status-error);
1679
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-status-error-ghost);
1647
1680
  }
1648
1681
 
1649
- .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1650
- border-color:var(--tds-field-border-color-hover);
1651
- }
1682
+ .tds-toggle-switch{
1683
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1684
+ --tds-toggle-switch-cursor:pointer;
1685
+ --tds-toggle-switch-display:inline-grid;
1686
+ --tds-toggle-switch-line-height:1.4;
1652
1687
 
1653
- .tds-currency-input-control:has(input:focus){
1654
- outline-color:var(--t-focus-ring-color);
1655
- outline-offset:var(--t-focus-ring-offset);
1656
- border-color:var(--tds-field-border-color-active);
1657
- }
1688
+ --tds-toggle-switch-label-color:var(--t-form-color);
1658
1689
 
1659
- .tds-currency-input-control input{
1660
- flex:1;
1661
- min-inline-size:0;
1662
- padding:0;
1663
- font-family:inherit;
1664
- font-size:inherit;
1665
- color:inherit;
1690
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1691
+ --tds-toggle-switch-track-outline:none;
1692
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1693
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1694
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1695
+
1696
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1697
+ --tds-toggle-switch-thumb-transform:translateX(0);
1698
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1699
+
1700
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1701
+ --tds-toggle-switch-description-line-height:1.35;
1702
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1703
+ position:relative;
1704
+
1705
+ display:var(--tds-toggle-switch-display);
1706
+ grid-template-columns:auto;
1707
+ grid-auto-columns:1fr;
1708
+ gap:var(--t-spacing-fourth) 0;
1709
+ -webkit-user-select:none;
1710
+ -moz-user-select:none;
1711
+ user-select:none;
1712
+ }
1713
+
1714
+ .tds-toggle-switch input[type="checkbox"]{
1715
+ position:absolute;
1716
+ width:var(--tds-toggle-switch-track-width);
1717
+ height:var(--tds-toggle-switch-track-height);
1718
+ margin:0;
1666
1719
  -webkit-appearance:none;
1667
1720
  -moz-appearance:none;
1668
1721
  appearance:none;
1669
- outline:0;
1722
+ cursor:var(--tds-toggle-switch-cursor);
1723
+ outline:var(--tds-toggle-switch-track-outline);
1724
+ outline-offset:var(--t-focus-ring-offset);
1670
1725
  background-color:transparent;
1671
1726
  border:0;
1727
+ border-radius:var(--t-border-radius-round);
1672
1728
  }
1673
1729
 
1674
- :is(.tds-currency-input-control input)::-moz-placeholder{
1675
- color:var(--tds-field-placeholder-color);
1676
- -moz-user-select:none;
1677
- user-select:none;
1730
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1731
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1678
1732
  }
1679
1733
 
1680
- :is(.tds-currency-input-control input)::placeholder{
1681
- color:var(--tds-field-placeholder-color);
1682
- -webkit-user-select:none;
1683
- -moz-user-select:none;
1684
- user-select:none;
1734
+ .tds-toggle-switch label{
1735
+ display:inline-flex;
1736
+ grid-area:1 / 2;
1737
+ padding-inline-start:var(--t-spacing-1);
1738
+ margin-top:-.09375em;
1739
+ font-size:var(--tds-toggle-switch-font-size);
1740
+ font-weight:var(--t-font-weight-normal);
1741
+ line-height:var(--tds-toggle-switch-line-height);
1742
+ color:var(--tds-toggle-switch-label-color);
1743
+ cursor:var(--tds-toggle-switch-cursor);
1744
+ }
1745
+
1746
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1747
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1748
+ }
1749
+
1750
+ .tds-toggle-switch:has(input:checked){
1751
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1752
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1753
+ }
1754
+
1755
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1756
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1685
1757
  }
1686
1758
 
1687
- .tds-currency-input-control .tds-currency-input-prefix{
1688
- flex-shrink:0;
1689
- color:var(--t-text-color-secondary);
1690
- pointer-events:none;
1691
- -webkit-user-select:none;
1692
- -moz-user-select:none;
1693
- user-select:none;
1694
- }
1759
+ .tds-toggle-switch:has(input:disabled){
1760
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1761
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1762
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1763
+ --tds-toggle-switch-cursor:not-allowed;
1764
+ }
1765
+
1766
+ .tds-toggle-switch-track{
1767
+ position:relative;
1768
+ flex-shrink:0;
1769
+ width:var(--tds-toggle-switch-track-width);
1770
+ height:var(--tds-toggle-switch-track-height);
1771
+ background-color:var(--tds-toggle-switch-track-background-color);
1772
+ border-radius:var(--t-border-radius-round);
1773
+ transition:var(--tds-toggle-switch-track-transition);
1774
+ }
1775
+
1776
+ .tds-toggle-switch-track::before{
1777
+ position:absolute;
1778
+ top:var(--t-spacing-fourth);
1779
+ left:var(--t-spacing-fourth);
1780
+ width:var(--tds-toggle-switch-thumb-size);
1781
+ height:var(--tds-toggle-switch-thumb-size);
1782
+ content:"";
1783
+ background-color:#fff;
1784
+ border-radius:var(--t-border-radius-round);
1785
+ transform:var(--tds-toggle-switch-thumb-transform);
1786
+ transition:var(--tds-toggle-switch-thumb-transition);
1787
+ }
1788
+
1789
+ @media (prefers-reduced-motion: reduce){
1790
+
1791
+ .tds-toggle-switch-track{
1792
+ --tds-toggle-switch-track-transition:none;
1793
+ --tds-toggle-switch-thumb-transition:none;
1794
+ }
1795
+ }
1796
+
1797
+ .tds-toggle-switch-description{
1798
+ display:flex;
1799
+ grid-area:2 / 2;
1800
+ align-items:flex-start;
1801
+ padding-inline-start:var(--t-spacing-1);
1802
+ margin:0;
1803
+ font-size:var(--tds-toggle-switch-description-font-size);
1804
+ line-height:var(--tds-toggle-switch-description-line-height);
1805
+ color:var(--tds-toggle-switch-description-color);
1806
+ cursor:text;
1807
+ }
1808
+
1809
+ .tds-toggle-switch--sm{
1810
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1811
+ --tds-toggle-switch-line-height:1.35;
1812
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1813
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1814
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1815
+ --tds-toggle-switch-description-line-height:1.3;
1816
+ }
1817
+
1818
+ .tds-toggle-switch--hide-label{
1819
+ --tds-toggle-switch-display:inline-flex;
1820
+ }
1821
+
1822
+ .tds-radio-group{
1823
+ --tds-radio-group-font-size:var(--t-font-size-md);
1824
+ --tds-radio-group-line-height:1.4;
1825
+ --tds-radio-group-gap:var(--t-spacing-1);
1695
1826
 
1696
- .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
1697
- --tds-field-background-color:var(--t-form-background-color-error);
1698
- --tds-field-border-color:var(--t-form-border-color-error);
1699
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1700
- }
1827
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1828
+ --tds-radio-group-description-line-height:1.35;
1829
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1830
+ --tds-radio-group-description-invalid-icon-display:none;
1831
+ display:flex;
1832
+ flex-direction:column;
1833
+ gap:0;
1834
+ padding:0;
1835
+ margin:0;
1701
1836
 
1702
- .tds-currency-input-control:has(:disabled){
1703
- --tds-field-border-color:var(--t-form-border-color-disabled);
1704
- --tds-field-background-color:var(--t-form-background-color-disabled);
1705
- --tds-field-color:var(--t-form-color-disabled);
1837
+ font-size:var(--tds-radio-group-font-size);
1838
+ line-height:var(--tds-radio-group-line-height);
1839
+ border:0;
1840
+ }
1706
1841
 
1707
- cursor:not-allowed;
1842
+ .tds-radio-group legend{
1843
+ float:left;
1844
+ padding:0;
1845
+ margin:0;
1708
1846
  }
1709
1847
 
1710
- .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
1711
- color:var(--tds-field-color);
1712
- }
1713
-
1714
- .tds-currency-input-control:has([readonly]){
1715
- --tds-field-border-color:var(--t-form-border-color-readonly);
1716
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1717
- --tds-field-background-color:var(--t-form-background-color-readonly);
1718
- --tds-field-color:var(--t-form-color-readonly);
1848
+ .tds-radio-group[aria-invalid="true"]{
1849
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1850
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1719
1851
  }
1720
1852
 
1721
- .tds-currency-input-control:has([readonly]):has(input:focus){
1722
- border-color:var(--t-form-border-color-hover);
1853
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1854
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1723
1855
  }
1724
- .tds-currency-input-currency-name--hidden{
1725
- position:absolute;
1726
- width:1px;
1727
- height:1px;
1728
- overflow:hidden;
1729
- white-space:nowrap;
1730
- clip-path:inset(50%);
1731
- }
1732
1856
 
1733
- .tds-popover{
1734
- max-inline-size:24rem;
1735
- overflow:auto;
1736
- overscroll-behavior:none;
1737
- outline:0;
1738
- scrollbar-color:#0004 var(--t-surface-color-card);
1739
- scrollbar-width:thin;
1740
- background:var(--t-surface-color-card);
1741
- background-clip:padding-box;
1742
- border:1px solid var(--t-border-color);
1743
- border-radius:var(--t-border-radius);
1744
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1745
- }
1746
-
1747
- @media (prefers-reduced-motion: no-preference){
1748
- .tds-popover[data-entering]{
1749
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1750
- }
1857
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1858
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1859
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1860
+ }
1751
1861
 
1752
- .tds-popover[data-exiting]{
1753
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1754
- }
1862
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1863
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1864
+ }
1755
1865
 
1756
- .tds-popover[data-entering],.tds-popover[data-exiting]{
1757
- will-change:opacity, transform;
1866
+ .tds-radio-group:has(input:required) legend::after{
1867
+ margin-left:.25ch;
1868
+ color:var(--t-text-color-status-error);
1869
+ content:"*";
1758
1870
  }
1759
1871
 
1760
- @keyframes tds-popover{
1761
- from{
1762
- opacity:0;
1763
- transform:translateY(-8px);
1764
- }
1765
- }
1872
+ .tds-radio-group-fields{
1873
+ display:flex;
1874
+ flex-direction:column;
1875
+ gap:var(--tds-radio-group-gap);
1876
+ align-items:flex-start;
1877
+ margin-top:var(--t-spacing-1);
1766
1878
  }
1767
1879
 
1768
- .tds-popover-content{
1880
+ .tds-radio-group-description{
1769
1881
  display:flex;
1770
- flex-direction:column;
1771
- padding:var(--t-spacing-1);
1772
- outline:0;
1882
+ gap:var(--t-spacing-half);
1883
+ align-items:flex-start;
1884
+ margin:var(--t-spacing-fourth) 0 0;
1885
+ font-size:var(--tds-radio-group-description-font-size);
1886
+ line-height:var(--tds-radio-group-description-line-height);
1887
+ color:var(--tds-radio-group-description-color);
1888
+ cursor:text;
1889
+ }
1890
+
1891
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1892
+ display:var(--tds-radio-group-description-invalid-icon-display);
1893
+ flex-shrink:0;
1894
+ margin-top:calc(.5lh - .5em);
1895
+ line-height:var(--tds-radio-group-description-line-height);
1896
+ }
1897
+
1898
+ .tds-radio-group--sm{
1899
+ --tds-radio-group-line-height:1.35;
1900
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1901
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1902
+ --tds-radio-group-description-line-height:1.3;
1773
1903
  }
1774
1904
 
1775
1905
  .tds-radio{
@@ -1834,634 +1964,659 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1834
1964
  --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1835
1965
  }
1836
1966
 
1837
- :is(.tds-radio input[type="radio"]):focus-visible{
1838
- outline:var(--t-focus-ring-outline);
1839
- outline-offset:var(--t-focus-ring-offset);
1967
+ :is(.tds-radio input[type="radio"]):focus-visible{
1968
+ outline:var(--t-focus-ring-outline);
1969
+ outline-offset:var(--t-focus-ring-offset);
1970
+ }
1971
+
1972
+ :is(.tds-radio input[type="radio"]):disabled{
1973
+ pointer-events:none;
1974
+ }
1975
+
1976
+ @media (prefers-reduced-motion: reduce){
1977
+
1978
+ .tds-radio input[type="radio"]{
1979
+ --tds-radio-transition-property:none;
1980
+ }
1981
+ }
1982
+
1983
+ .tds-radio:has(input:checked){
1984
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1985
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1986
+ --tds-radio-input-border-width:4px;
1987
+ }
1988
+
1989
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1990
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1991
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1992
+ }
1993
+
1994
+ .tds-radio:has(input:user-invalid){
1995
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1996
+ }
1997
+
1998
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1999
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2000
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2001
+ }
2002
+
2003
+ .tds-radio:has(input:disabled){
2004
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2005
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2006
+
2007
+ --tds-radio-label-color:var(--t-form-color-disabled);
2008
+ --tds-radio-description-color:var(--t-form-color-disabled);
2009
+ --tds-radio-cursor:not-allowed;
2010
+ }
2011
+
2012
+ .tds-radio:has(input:disabled) input:checked{
2013
+ --tds-radio-input-background-color:var(--t-form-background-color);
2014
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2015
+ }
2016
+
2017
+ .tds-radio-description{
2018
+ display:flex;
2019
+ grid-area:2 / 2;
2020
+ gap:var(--t-spacing-half);
2021
+ align-items:flex-start;
2022
+ padding-inline-start:var(--t-spacing-1);
2023
+ margin:0;
2024
+ font-size:var(--tds-radio-description-font-size);
2025
+ line-height:var(--tds-radio-description-line-height);
2026
+ color:var(--tds-radio-description-color);
2027
+ cursor:text;
2028
+ }
2029
+
2030
+ .tds-radio--sm{
2031
+ --tds-radio-line-height:1.35;
2032
+ --tds-radio-input-size:var(--t-element-size-sm);
2033
+ --tds-radio-font-size:var(--t-font-size-sm);
2034
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2035
+ --tds-radio-description-line-height:1.3;
2036
+ }
2037
+
2038
+ .tds-input:has(textarea){
2039
+ --tds-input-padding-block:6px;
2040
+ --tds-input-resizer-size:var(--t-element-size-sm);
2041
+ --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");
2042
+ }
2043
+
2044
+ @supports (x: attr(x type(*))){
2045
+
2046
+ .tds-input textarea{
2047
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2048
+ }
2049
+ }
2050
+
2051
+ .tds-input.tds-textarea--resize-vertical textarea{
2052
+ resize:vertical;
2053
+ }
2054
+
2055
+ .tds-input.tds-textarea--resize-none textarea{
2056
+ resize:none;
2057
+ }
2058
+
2059
+ .tds-input.tds-textarea--resize-auto textarea{
2060
+ resize:vertical;
2061
+ }
2062
+
2063
+ @supports (field-sizing: content){
2064
+ .tds-input.tds-textarea--resize-auto textarea{
2065
+ field-sizing:content;
2066
+ resize:none;
2067
+ }
2068
+ }
2069
+
2070
+ .tds-input textarea{
2071
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2072
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2073
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2074
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2075
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2076
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2077
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2078
+ --tds-input-scrollbar-thumb-border-radius:999px;
2079
+ --tds-input-scrollbar-thumb-border-width:3px;
2080
+ --tds-input-scrollbar-track-margin-block:.125rem;
2081
+ scrollbar-color:initial;
2082
+ transition-timing-function:var(--t-ease-in-out);
2083
+ transition-duration:var(--t-duration-200);
2084
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2085
+ }
2086
+
2087
+ @media (pointer: fine){
2088
+ :is(.tds-input textarea)::-webkit-scrollbar{
2089
+ width:12px;
2090
+ height:12px;
2091
+ cursor:default;
1840
2092
  }
1841
2093
 
1842
- :is(.tds-radio input[type="radio"]):disabled{
1843
- pointer-events:none;
2094
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2095
+ cursor:default;
2096
+ background:var(--tds-input-scrollbar-thumb-color);
2097
+ background-clip:content-box;
2098
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2099
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1844
2100
  }
1845
2101
 
1846
- @media (prefers-reduced-motion: reduce){
1847
-
1848
- .tds-radio input[type="radio"]{
1849
- --tds-radio-transition-property:none;
1850
- }
2102
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2103
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1851
2104
  }
1852
2105
 
1853
- .tds-radio:has(input:checked){
1854
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1855
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1856
- --tds-radio-input-border-width:4px;
1857
- }
1858
-
1859
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1860
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1861
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2106
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2107
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1862
2108
  }
1863
2109
 
1864
- .tds-radio:has(input:user-invalid){
1865
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1866
- }
1867
-
1868
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1869
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1870
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2110
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2111
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1871
2112
  }
1872
2113
 
1873
- .tds-radio:has(input:disabled){
1874
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1875
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2114
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2115
+ background:var(--tds-input-scrollbar-surface-color);
2116
+ }
1876
2117
 
1877
- --tds-radio-label-color:var(--t-form-color-disabled);
1878
- --tds-radio-description-color:var(--t-form-color-disabled);
1879
- --tds-radio-cursor:not-allowed;
1880
- }
2118
+ :is(.tds-input textarea)::-webkit-resizer{
2119
+ background:var(--tds-input-resizer-icon) no-repeat;
2120
+ background-position:right bottom;
2121
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2122
+ }
1881
2123
 
1882
- .tds-radio:has(input:disabled) input:checked{
1883
- --tds-radio-input-background-color:var(--t-form-background-color);
1884
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2124
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2125
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2126
+ cursor:default;
1885
2127
  }
1886
2128
 
1887
- .tds-radio-description{
1888
- display:flex;
1889
- grid-area:2 / 2;
1890
- gap:var(--t-spacing-half);
1891
- align-items:flex-start;
1892
- padding-inline-start:var(--t-spacing-1);
1893
- margin:0;
1894
- font-size:var(--tds-radio-description-font-size);
1895
- line-height:var(--tds-radio-description-line-height);
1896
- color:var(--tds-radio-description-color);
1897
- cursor:text;
1898
- }
2129
+ @supports (-moz-appearance: none){
2130
+ :is(.tds-input textarea){
2131
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2132
+ scrollbar-width:thin;
2133
+ }
1899
2134
 
1900
- .tds-radio--sm{
1901
- --tds-radio-line-height:1.35;
1902
- --tds-radio-input-size:var(--t-element-size-sm);
1903
- --tds-radio-font-size:var(--t-font-size-sm);
1904
- --tds-radio-description-font-size:var(--t-font-size-xs);
1905
- --tds-radio-description-line-height:1.3;
1906
- }
2135
+ @media (hover){
2136
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2137
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2138
+ }
2139
+ }
2140
+ }
2141
+ }
1907
2142
 
1908
- .tds-radio-group{
1909
- --tds-radio-group-font-size:var(--t-font-size-md);
1910
- --tds-radio-group-line-height:1.4;
1911
- --tds-radio-group-gap:var(--t-spacing-1);
2143
+ .tds-checkbox-group{
2144
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
2145
+ --tds-checkbox-group-line-height:1.4;
2146
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1912
2147
 
1913
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1914
- --tds-radio-group-description-line-height:1.35;
1915
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1916
- --tds-radio-group-description-invalid-icon-display:none;
2148
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
2149
+ --tds-checkbox-group-description-line-height:1.35;
2150
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
2151
+ --tds-checkbox-group-description-invalid-icon-display:none;
1917
2152
  display:flex;
1918
2153
  flex-direction:column;
1919
2154
  gap:0;
1920
2155
  padding:0;
1921
2156
  margin:0;
1922
2157
 
1923
- font-size:var(--tds-radio-group-font-size);
1924
- line-height:var(--tds-radio-group-line-height);
2158
+ font-size:var(--tds-checkbox-group-font-size);
2159
+ line-height:var(--tds-checkbox-group-line-height);
1925
2160
  border:0;
1926
2161
  }
1927
2162
 
1928
- .tds-radio-group legend{
2163
+ .tds-checkbox-group legend{
1929
2164
  float:left;
1930
2165
  padding:0;
1931
2166
  margin:0;
1932
2167
  }
1933
2168
 
1934
- .tds-radio-group[aria-invalid="true"]{
1935
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1936
- --tds-radio-group-description-invalid-icon-display:inline-block;
2169
+ .tds-checkbox-group[aria-invalid="true"]{
2170
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
2171
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1937
2172
  }
1938
2173
 
1939
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1940
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1941
- }
1942
-
1943
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1944
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1945
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1946
- }
1947
-
1948
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1949
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1950
- }
1951
-
1952
- .tds-radio-group:has(input:required) legend::after{
2174
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1953
2175
  margin-left:.25ch;
1954
2176
  color:var(--t-text-color-status-error);
1955
2177
  content:"*";
1956
2178
  }
1957
2179
 
1958
- .tds-radio-group-fields{
2180
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
2181
+ content:none;
2182
+ }
2183
+
2184
+ .tds-checkbox-group-fields{
1959
2185
  display:flex;
1960
2186
  flex-direction:column;
1961
- gap:var(--tds-radio-group-gap);
2187
+ gap:var(--tds-checkbox-group-gap);
1962
2188
  align-items:flex-start;
1963
2189
  margin-top:var(--t-spacing-1);
1964
2190
  }
1965
2191
 
1966
- .tds-radio-group-description{
2192
+ .tds-checkbox-group-description{
1967
2193
  display:flex;
1968
2194
  gap:var(--t-spacing-half);
1969
2195
  align-items:flex-start;
1970
2196
  margin:var(--t-spacing-fourth) 0 0;
1971
- font-size:var(--tds-radio-group-description-font-size);
1972
- line-height:var(--tds-radio-group-description-line-height);
1973
- color:var(--tds-radio-group-description-color);
2197
+ font-size:var(--tds-checkbox-group-description-font-size);
2198
+ line-height:var(--tds-checkbox-group-description-line-height);
2199
+ color:var(--tds-checkbox-group-description-color);
1974
2200
  cursor:text;
1975
2201
  }
1976
2202
 
1977
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1978
- display:var(--tds-radio-group-description-invalid-icon-display);
2203
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
2204
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1979
2205
  flex-shrink:0;
1980
2206
  margin-top:calc(.5lh - .5em);
1981
- line-height:var(--tds-radio-group-description-line-height);
2207
+ line-height:var(--tds-checkbox-group-description-line-height);
1982
2208
  }
1983
2209
 
1984
- .tds-radio-group--sm{
1985
- --tds-radio-group-line-height:1.35;
1986
- --tds-radio-group-font-size:var(--t-font-size-sm);
1987
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1988
- --tds-radio-group-description-line-height:1.3;
2210
+ .tds-checkbox-group--sm{
2211
+ --tds-checkbox-group-line-height:1.35;
2212
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
2213
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
2214
+ --tds-checkbox-group-description-line-height:1.3;
1989
2215
  }
1990
2216
 
2217
+ .tds-button-group{
2218
+ display:inline-flex;
2219
+ }
2220
+ .tds-button-group > .tds-btn{
2221
+ --tds-button-group-item-z-index:1;
1991
2222
 
1992
- :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{
1993
- -webkit-appearance:none;
1994
- appearance:none;
1995
- }
1996
-
1997
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1998
- inline-size:1em;
1999
- block-size:2em;
2000
- }
2001
-
2002
- [type="file"]:is(.tds-input input){
2003
- padding-block:var(--t-spacing-half);
2004
- padding-inline-start:var(--t-spacing-half);
2223
+ position:relative;
2224
+ z-index:var(--tds-button-group-item-z-index);
2225
+ border-radius:0;
2226
+ }
2227
+ :is(.tds-button-group > .tds-btn):not(:first-child){
2228
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
2005
2229
  }
2006
-
2007
- [type="file"]:is(.tds-input input):not(:disabled){
2008
- color:var(--t-text-color-secondary);
2009
- }
2010
-
2011
- [type="file"]:is(.tds-input input)::file-selector-button{
2012
- --_file-btn-padding-block:3px;
2013
-
2014
- padding-block:var(--_file-btn-padding-block);
2015
- padding-inline:12px;
2016
- margin-inline-end:12px;
2017
- font:inherit;
2018
- line-height:calc(var(--tds-input-min-height) - (var(--t-form-border-width) * 2 + var(--t-border-width) * 2 + var(--_file-btn-padding-block) * 2 + var(--t-spacing-half) * 2));
2019
- color:var(--t-text-color-status-neutral);
2020
- cursor:pointer;
2021
- background-color:var(--t-fill-color-button-neutral-solid);
2022
- border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
2023
- border-radius:var(--t-border-radius-md);
2024
- transition-timing-function:var(--t-ease-in-out);
2025
- transition-duration:var(--t-duration-200);
2026
- transition-property:color, background-color, border-color;
2027
- }
2028
-
2029
- [type="file"]:is(.tds-input input):hover::file-selector-button{
2030
- background-color:var(--t-fill-color-button-neutral-solid-hover);
2031
- border-color:var(--t-fill-color-button-neutral-solid-hover);
2230
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
2231
+ position:absolute;
2232
+ inset-block:calc(var(--tds-btn-border-width) * -1);
2233
+ width:var(--tds-btn-border-width);
2234
+ pointer-events:none;
2235
+ content:"";
2236
+ background-color:var(--t-border-color-white);
2032
2237
  }
2033
-
2034
- [type="file"]:is(.tds-input input):active::file-selector-button{
2035
- background-color:var(--t-fill-color-button-neutral-solid-active);
2036
- border-color:var(--t-fill-color-button-neutral-solid-active);
2238
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
2239
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
2037
2240
  }
2038
-
2039
- [type="file"]:is(.tds-input input):disabled::file-selector-button{
2040
- color:var(--t-text-color-disabled);
2041
- pointer-events:none;
2042
- background-color:var(--t-fill-color-button-neutral-solid-disabled);
2043
- border-color:var(--t-fill-color-button-neutral-solid-disabled);
2241
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
2242
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
2044
2243
  }
2045
- @supports (field-sizing: content){
2046
- .tds-input--auto-width{
2047
- inline-size:-moz-fit-content;
2048
- inline-size:fit-content;
2049
- min-inline-size:min(100%, 122px);
2244
+ :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
2245
+ --tds-button-group-item-z-index:2;
2246
+ }
2247
+ :is(.tds-button-group > .tds-btn):focus-visible{
2248
+ --tds-button-group-item-z-index:5;
2249
+ }
2250
+ .tds-button-group > .tds-btn:first-child{
2251
+ border-start-start-radius:var(--tds-btn-border-radius);
2252
+ border-end-start-radius:var(--tds-btn-border-radius);
2253
+ }
2254
+ .tds-button-group > .tds-btn:last-child{
2255
+ border-start-end-radius:var(--tds-btn-border-radius);
2256
+ border-end-end-radius:var(--tds-btn-border-radius);
2050
2257
  }
2051
2258
 
2052
- .tds-input--auto-width input{
2053
- field-sizing:content;
2054
- inline-size:auto;
2055
- }
2056
- }
2057
2259
 
2058
- .tds-modal-overlay{
2059
- --tds-modal-min-margin-block:var(--t-spacing-3);
2260
+ @media (prefers-reduced-motion: no-preference){
2060
2261
 
2061
- position:fixed;
2062
- inset:0;
2063
- z-index:1000;
2064
- display:grid;
2065
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
2066
- justify-items:center;
2067
- overflow-y:auto;
2068
- background:hsl(0 0% 0% / 40%);
2262
+ :root{
2263
+ interpolate-size:allow-keywords;
2069
2264
  }
2070
-
2071
- .tds-modal-overlay[data-entering]{
2072
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
2073
- }
2074
-
2075
- .tds-modal-overlay[data-exiting]{
2076
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
2077
- }
2078
-
2079
- @keyframes tds-modal-overlay-fade{
2080
- from{
2081
- opacity:0;
2082
2265
  }
2083
- }
2084
-
2085
- .tds-modal-frame{
2086
- --tds-modal-width:600px;
2087
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
2088
- display:flex;
2089
2266
 
2090
- grid-row:2;
2091
- justify-content:center;
2092
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
2093
- }
2267
+ @layer tds-component{
2268
+ tds-sidenav,
2269
+ .tds-sidenav{
2270
+ --tds-sidenav-indent:12px;
2271
+ --tds-sidenav-item-depth:0;
2094
2272
 
2095
- .tds-modal-frame[data-entering]{
2096
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
2097
- }
2273
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
2098
2274
 
2099
- .tds-modal-frame[data-exiting]{
2100
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
2101
- }
2275
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
2276
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
2277
+ --tds-sidenav-collapse-closed-opacity:0;
2278
+ --tds-sidenav-collapse-open-opacity:1;
2279
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
2280
+ --tds-sidenav-collapse-open-transform:translateY(0);
2102
2281
 
2103
- .tds-modal-frame--sm{
2104
- --tds-modal-width:400px;
2105
- }
2282
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
2283
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
2284
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
2285
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
2106
2286
 
2107
- .tds-modal-frame--lg{
2108
- --tds-modal-width:800px;
2109
- }
2287
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
2288
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
2289
+ --tds-sidenav-item-nested-background-selected:transparent;
2110
2290
 
2111
- .tds-modal-frame--xl{
2112
- --tds-modal-width:1000px;
2113
- }
2291
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
2292
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2293
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
2114
2294
 
2115
- @keyframes tds-modal-zoom{
2116
- from{
2117
- opacity:0;
2118
- scale:.96;
2295
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
2296
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
2119
2297
  }
2120
- }
2121
2298
 
2122
- @media (prefers-reduced-motion: reduce){
2123
- .tds-modal-overlay[data-entering],
2124
- .tds-modal-overlay[data-exiting],
2125
- .tds-modal-frame[data-entering],
2126
- .tds-modal-frame[data-exiting]{
2127
- animation:none;
2299
+ @media (prefers-reduced-motion: reduce){
2300
+ tds-sidenav,
2301
+ .tds-sidenav{
2302
+ --tds-sidenav-collapse-transition-enter:none;
2303
+ --tds-sidenav-collapse-transition-exit:none;
2304
+ --tds-sidenav-collapse-closed-transform:none;
2305
+ --tds-sidenav-collapse-open-transform:none;
2128
2306
  }
2129
- }
2130
-
2131
- .tds-modal{
2132
- display:flex;
2133
- flex-direction:column;
2134
- width:100%;
2135
- padding-block-start:var(--t-spacing-3);
2136
- padding-inline:0;
2137
- background:var(--t-surface-color-card);
2307
+ }
2138
2308
 
2139
- border:0;
2140
- border-radius:var(--t-border-radius-lg);
2141
- box-shadow:0 4px 18px 0 #0003;
2309
+ .tds-sidenav--theme-gray{
2310
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
2311
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
2312
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
2313
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2314
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
2315
+ }
2142
2316
  }
2143
2317
 
2144
- .tds-modal:focus{
2145
- outline:none;
2318
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2319
+ display:flex;
2146
2320
  }
2147
2321
 
2148
- .tds-modal-header{
2149
- display:grid;
2150
- grid-template-columns:1fr auto;
2151
- -moz-column-gap:var(--t-spacing-2);
2152
- column-gap:var(--t-spacing-2);
2153
- padding-block:0;
2154
- padding-inline:var(--t-spacing-4);
2155
- }
2156
-
2157
- .tds-modal-title{
2158
- grid-row:1;
2159
- grid-column:1;
2160
- margin:0;
2161
- font-size:var(--t-font-size-2xl);
2162
- font-weight:var(--t-font-weight-medium);
2163
- line-height:140%;
2164
- color:var(--t-text-color-headline);
2165
- }
2322
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
2323
+ flex-direction:column;
2324
+ gap:var(--t-spacing-half);
2325
+ width:100%;
2326
+ }
2166
2327
 
2167
- .tds-modal-subtitle{
2168
- grid-row:2;
2169
- grid-column:1;
2328
+ .tds-sidenav-section-list{
2329
+ width:100%;
2330
+ padding:0;
2170
2331
  margin:0;
2171
- font-size:var(--t-font-size-md);
2172
- font-weight:var(--t-font-weight-medium);
2173
- line-height:140%;
2174
- color:var(--t-text-color-secondary);
2175
- }
2176
-
2177
- .tds-modal-close{
2178
- grid-row:1;
2179
- grid-column:2;
2180
- align-self:center;
2181
- color:var(--t-icon-color-dim);
2182
- }
2183
-
2184
- .tds-modal-body{
2185
- padding-block:var(--t-spacing-3);
2186
- padding-inline:var(--t-spacing-4);
2187
- }
2188
-
2189
- .tds-modal-body--full-width{
2190
- padding-inline:0;
2332
+ list-style:none;
2191
2333
  }
2192
2334
 
2193
- .tds-modal-footer{
2335
+ .tds-sidenav-section-header{
2194
2336
  display:flex;
2195
- gap:var(--t-spacing-2);
2196
- align-items:center;
2197
- justify-content:flex-end;
2198
- padding-block:var(--t-spacing-3);
2199
- padding-inline:var(--t-spacing-4);
2200
- border-top:1px solid var(--t-border-color);
2337
+ align-items:baseline;
2338
+ justify-content:space-between;
2339
+ padding-top:var(--t-spacing-2);
2201
2340
  }
2202
2341
 
2203
- .tds-modal-footer > [slot="start"]{
2204
- margin-inline-end:auto;
2205
- }
2342
+ .tds-sidenav-section-header h2{
2343
+ margin:0;
2344
+ font-size:var(--t-font-size-sm);
2345
+ font-weight:var(--t-font-weight-semibold);
2346
+ line-height:1.35;
2347
+ color:var(--t-text-color-secondary);
2348
+ text-transform:uppercase;
2349
+ }
2206
2350
 
2207
- @media (min-width: 720px){
2208
- .tds-modal-overlay{
2209
- --tds-modal-min-margin-block:0;
2351
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2352
+ padding-top:0;
2210
2353
  }
2211
2354
 
2212
- .tds-modal-footer{
2213
- position:sticky;
2214
- bottom:0;
2215
- background:var(--t-surface-color-card);
2216
- border-end-start-radius:var(--t-border-radius-lg);
2217
- border-end-end-radius:var(--t-border-radius-lg);
2355
+ .tds-sidenav-section-header [slot="label-actions"]{
2356
+ display:flex;
2357
+ gap:var(--t-spacing-half);
2358
+ align-items:center;
2218
2359
  }
2219
- }
2220
2360
 
2221
- .tds-input:has(textarea){
2222
- --tds-input-padding-block:6px;
2223
- --tds-input-resizer-size:var(--t-element-size-sm);
2224
- --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");
2361
+ .tds-sidenav-section [slot="section-actions"]{
2362
+ display:flex;
2363
+ gap:12px;
2364
+ align-items:center;
2365
+ min-height:42px;
2366
+ padding:var(--t-spacing-1) 0;
2225
2367
  }
2226
2368
 
2227
- @supports (x: attr(x type(*))){
2228
-
2229
- .tds-input textarea{
2230
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2369
+ .tds-sidenav-section-list,
2370
+ .tds-sidenav-item{
2371
+ width:100%;
2372
+ padding:0;
2373
+ margin:0;
2231
2374
  }
2375
+
2376
+ .tds-sidenav-item :is(a,button){
2377
+ position:relative;
2378
+ display:flex;
2379
+ gap:12px;
2380
+ align-items:center;
2381
+ width:100%;
2382
+ padding:12px;
2383
+ overflow:hidden;
2384
+ font-size:var(--t-font-size-sm);
2385
+ line-height:18px;
2386
+ color:var(--t-text-color-headline);
2387
+ white-space:nowrap;
2388
+ text-decoration:none;
2389
+ -webkit-appearance:none;
2390
+ -moz-appearance:none;
2391
+ appearance:none;
2392
+ cursor:pointer;
2393
+ background-color:var(--tds-sidenav-item-background, transparent);
2394
+ border:0;
2395
+ border-radius:var(--t-border-radius);
2396
+ transition:var(--tds-sidenav-item-transition);
2232
2397
  }
2233
2398
 
2234
- .tds-input.tds-textarea--resize-vertical textarea{
2235
- resize:vertical;
2399
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2400
+ display:block;
2401
+ flex:1;
2402
+ overflow:hidden;
2403
+ text-overflow:ellipsis;
2404
+ text-align:left;
2405
+ white-space:nowrap;
2236
2406
  }
2237
2407
 
2238
- .tds-input.tds-textarea--resize-none textarea{
2239
- resize:none;
2408
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2409
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2410
+ color:var(--t-text-color-headline);
2411
+ text-decoration:none;
2240
2412
  }
2241
2413
 
2242
- .tds-input.tds-textarea--resize-auto textarea{
2243
- resize:vertical;
2414
+ :is(.tds-sidenav-item :is(a,button)):active{
2415
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2244
2416
  }
2245
2417
 
2246
- @supports (field-sizing: content){
2247
- .tds-input.tds-textarea--resize-auto textarea{
2248
- field-sizing:content;
2249
- resize:none;
2250
- }
2418
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2419
+ overflow:hidden;
2420
+ color:var(--tds-sidenav-item-icon-color);
2251
2421
  }
2252
2422
 
2253
- .tds-input textarea{
2254
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2255
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2256
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2257
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2258
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2259
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2260
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2261
- --tds-input-scrollbar-thumb-border-radius:999px;
2262
- --tds-input-scrollbar-thumb-border-width:3px;
2263
- --tds-input-scrollbar-track-margin-block:.125rem;
2264
- scrollbar-color:initial;
2265
- transition-timing-function:var(--t-ease-in-out);
2266
- transition-duration:var(--t-duration-200);
2267
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2268
- }
2423
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
2424
+ display:block;
2425
+ width:var(--tds-sidenav-item-icon-size);
2426
+ height:var(--tds-sidenav-item-icon-size);
2427
+ }
2269
2428
 
2270
- @media (pointer: fine){
2271
- :is(.tds-input textarea)::-webkit-scrollbar{
2272
- width:12px;
2273
- height:12px;
2274
- cursor:default;
2429
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2430
+ --tds-sidenav-indent:19px;
2275
2431
  }
2276
2432
 
2277
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2278
- cursor:default;
2279
- background:var(--tds-input-scrollbar-thumb-color);
2280
- background-clip:content-box;
2281
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2282
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2433
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2434
+ visibility:visible;
2435
+ block-size:auto;
2436
+ opacity:1;
2283
2437
  }
2284
2438
 
2285
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2286
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2287
- }
2439
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2440
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2441
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2288
2442
 
2289
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2290
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2291
- }
2443
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2444
+ font-weight:var(--t-font-weight-semibold);
2445
+ }
2292
2446
 
2293
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2294
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2295
- }
2447
+ .tds-sidenav-item:has(.tds-sidenav-section){
2448
+ display:flex;
2449
+ flex-direction:column;
2450
+ gap:var(--t-spacing-half);
2451
+ }
2296
2452
 
2297
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2298
- background:var(--tds-input-scrollbar-surface-color);
2453
+ .tds-sidenav-item .tds-sidenav-section-list{
2454
+ --tds-sidenav-item-depth:1;
2455
+ gap:0;
2456
+ }
2457
+
2458
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2459
+ visibility:hidden;
2460
+ block-size:0;
2461
+ overflow-y:clip;
2462
+ opacity:0;
2463
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2299
2464
  }
2300
2465
 
2301
- :is(.tds-input textarea)::-webkit-resizer{
2302
- background:var(--tds-input-resizer-icon) no-repeat;
2303
- background-position:right bottom;
2304
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2466
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2467
+ --tds-sidenav-item-depth:2;
2305
2468
  }
2306
2469
 
2307
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2308
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2309
- cursor:default;
2470
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2471
+ min-height:var(--t-element-size-2xl);
2472
+ padding-block:9px;
2473
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2474
+ line-height:1;
2475
+ background-color:transparent;
2310
2476
  }
2311
2477
 
2312
- @supports (-moz-appearance: none){
2313
- :is(.tds-input textarea){
2314
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2315
- scrollbar-width:thin;
2478
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2479
+ position:absolute;
2480
+ top:0;
2481
+ bottom:0;
2482
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2483
+ width:2px;
2484
+ content:"";
2485
+ background-color:var(--tds-sidenav-item-nested-border-color);
2486
+ transition:var(--tds-sidenav-item-transition);
2316
2487
  }
2317
2488
 
2318
- @media (hover){
2319
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2320
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2321
- }
2489
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2490
+ position:absolute;
2491
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2492
+ z-index:-1;
2493
+ height:100%;
2494
+ content:"";
2495
+ background-color:var(--tds-sidenav-item-nested-background);
2496
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2497
+ transition:var(--tds-sidenav-item-transition);
2322
2498
  }
2323
- }
2324
- }
2325
-
2326
- .tds-toggle-switch{
2327
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2328
- --tds-toggle-switch-cursor:pointer;
2329
- --tds-toggle-switch-display:inline-grid;
2330
- --tds-toggle-switch-line-height:1.4;
2331
2499
 
2332
- --tds-toggle-switch-label-color:var(--t-form-color);
2500
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
2501
+ display:block;
2502
+ text-align:left;
2503
+ white-space:normal;
2504
+ }
2333
2505
 
2334
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2335
- --tds-toggle-switch-track-outline:none;
2336
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2337
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2338
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2506
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
2507
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2508
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2509
+ }
2339
2510
 
2340
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2341
- --tds-toggle-switch-thumb-transform:translateX(0);
2342
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2511
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2512
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2513
+ }
2343
2514
 
2344
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2345
- --tds-toggle-switch-description-line-height:1.35;
2346
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2347
- position:relative;
2515
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2516
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2517
+ font-weight:var(--t-font-weight-medium);
2518
+ }
2348
2519
 
2349
- display:var(--tds-toggle-switch-display);
2350
- grid-template-columns:auto;
2351
- grid-auto-columns:1fr;
2352
- gap:var(--t-spacing-fourth) 0;
2353
- -webkit-user-select:none;
2354
- -moz-user-select:none;
2355
- user-select:none;
2520
+ .tds-sidenav-responsive-header{
2521
+ display:flex;
2522
+ gap:var(--t-spacing-2);
2523
+ align-items:center;
2524
+ width:100%;
2356
2525
  }
2357
2526
 
2358
- .tds-toggle-switch input[type="checkbox"]{
2359
- position:absolute;
2360
- width:var(--tds-toggle-switch-track-width);
2361
- height:var(--tds-toggle-switch-track-height);
2362
- margin:0;
2363
- -webkit-appearance:none;
2364
- -moz-appearance:none;
2365
- appearance:none;
2366
- cursor:var(--tds-toggle-switch-cursor);
2367
- outline:var(--tds-toggle-switch-track-outline);
2368
- outline-offset:var(--t-focus-ring-offset);
2369
- background-color:transparent;
2370
- border:0;
2371
- border-radius:var(--t-border-radius-round);
2527
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2528
+ order:0;
2372
2529
  }
2373
2530
 
2374
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2375
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2376
- }
2531
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2532
+ flex:1;
2533
+ order:1;
2534
+ margin:0;
2535
+ font-size:var(--t-font-size-lg);
2536
+ font-weight:var(--t-font-weight-medium);
2537
+ color:var(--t-text-color-headline);
2538
+ }
2377
2539
 
2378
- .tds-toggle-switch label{
2379
- display:inline-flex;
2380
- grid-area:1 / 2;
2381
- padding-inline-start:var(--t-spacing-1);
2382
- margin-top:-.09375em;
2383
- font-size:var(--tds-toggle-switch-font-size);
2384
- font-weight:var(--t-font-weight-normal);
2385
- line-height:var(--tds-toggle-switch-line-height);
2386
- color:var(--tds-toggle-switch-label-color);
2387
- cursor:var(--tds-toggle-switch-cursor);
2540
+ @media (max-width: 719px){
2541
+ .tds-sidenav-collapse{
2542
+ z-index:10001;
2543
+ display:none;
2544
+ max-width:min(448px, calc(100vw - 48px));
2545
+ padding:0;
2546
+ margin:12px 0;
2547
+ position-area:bottom span-right;
2548
+ overflow:hidden;
2549
+ outline:0;
2550
+ background:var(--t-surface-color-card);
2551
+ border:0;
2552
+ border-radius:6px;
2553
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2554
+ opacity:var(--tds-sidenav-collapse-open-opacity);
2555
+ transform:var(--tds-sidenav-collapse-open-transform);
2556
+ transition:var(--tds-sidenav-collapse-transition-enter);
2557
+ will-change:transform;
2388
2558
  }
2389
2559
 
2390
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2391
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2560
+ .tds-sidenav-scroll-container{
2561
+ --webkit-overflow-scrolling:touch;
2562
+ display:block;
2563
+ width:100%;
2564
+ height:-moz-fit-content;
2565
+ height:fit-content;
2566
+ padding:var(--t-spacing-2);
2567
+ overflow-y:auto;
2392
2568
  }
2393
2569
 
2394
- .tds-toggle-switch:has(input:checked){
2395
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2396
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2570
+ .tds-sidenav-item :is(a, button) :is(.prefix){
2571
+ display:none;
2397
2572
  }
2573
+ @supports selector(:popover-open){
2574
+ .tds-sidenav-collapse:popover-open{
2575
+ display:flex;
2576
+ }
2398
2577
 
2399
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2400
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2578
+ .tds-sidenav-collapse:not(:popover-open){
2579
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2580
+ transition:var(--tds-sidenav-collapse-transition-exit);
2401
2581
  }
2402
2582
 
2403
- .tds-toggle-switch:has(input:disabled){
2404
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2405
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2406
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2407
- --tds-toggle-switch-cursor:not-allowed;
2583
+ @starting-style{
2584
+ .tds-sidenav-collapse:popover-open{
2585
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2586
+ transform:var(--tds-sidenav-collapse-closed-transform);
2587
+ }
2588
+ }
2408
2589
  }
2590
+ @supports not selector(:popover-open){
2591
+ .tds-sidenav-collapse.\:popover-open{
2592
+ display:flex;
2593
+ }
2409
2594
 
2410
- .tds-toggle-switch-track{
2411
- position:relative;
2412
- flex-shrink:0;
2413
- width:var(--tds-toggle-switch-track-width);
2414
- height:var(--tds-toggle-switch-track-height);
2415
- background-color:var(--tds-toggle-switch-track-background-color);
2416
- border-radius:var(--t-border-radius-round);
2417
- transition:var(--tds-toggle-switch-track-transition);
2595
+ .tds-sidenav-collapse:not(.\:popover-open){
2596
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2597
+ transition:var(--tds-sidenav-collapse-transition-exit);
2598
+ }
2599
+ }
2418
2600
  }
2419
2601
 
2420
- .tds-toggle-switch-track::before{
2421
- position:absolute;
2422
- top:var(--t-spacing-fourth);
2423
- left:var(--t-spacing-fourth);
2424
- width:var(--tds-toggle-switch-thumb-size);
2425
- height:var(--tds-toggle-switch-thumb-size);
2426
- content:"";
2427
- background-color:#fff;
2428
- border-radius:var(--t-border-radius-round);
2429
- transform:var(--tds-toggle-switch-thumb-transform);
2430
- transition:var(--tds-toggle-switch-thumb-transition);
2602
+ @media (min-width: 720px){
2603
+ .tds-sidenav-responsive-header{
2604
+ display:none;
2431
2605
  }
2432
-
2433
- @media (prefers-reduced-motion: reduce){
2434
-
2435
- .tds-toggle-switch-track{
2436
- --tds-toggle-switch-track-transition:none;
2437
- --tds-toggle-switch-thumb-transition:none;
2438
2606
  }
2439
- }
2440
2607
 
2441
- .tds-toggle-switch-description{
2442
- display:flex;
2443
- grid-area:2 / 2;
2444
- align-items:flex-start;
2445
- padding-inline-start:var(--t-spacing-1);
2446
- margin:0;
2447
- font-size:var(--tds-toggle-switch-description-font-size);
2448
- line-height:var(--tds-toggle-switch-description-line-height);
2449
- color:var(--tds-toggle-switch-description-color);
2450
- cursor:text;
2451
- }
2608
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2609
+ display:none;
2610
+ }
2452
2611
 
2453
- .tds-toggle-switch--sm{
2454
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2455
- --tds-toggle-switch-line-height:1.35;
2456
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2457
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2458
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2459
- --tds-toggle-switch-description-line-height:1.3;
2460
- }
2612
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2613
+ display:block;
2614
+ }
2461
2615
 
2462
- .tds-toggle-switch--hide-label{
2463
- --tds-toggle-switch-display:inline-flex;
2464
- }
2616
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2617
+ display:flex;
2618
+ flex-direction:column;
2619
+ }
2465
2620
 
2466
2621
  .tds-input{
2467
2622
  --tds-input-border-color:var(--t-form-border-color);
@@ -4118,193 +4273,69 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4118
4273
  [data-flex-gap-xl="6"]{ gap:var(--t-spacing-6); }
4119
4274
  [data-flex-gap-xl="7"]{ gap:var(--t-spacing-7); }
4120
4275
 
4121
- [data-flex-row-gap-xl="0"]{ row-gap:0; }
4122
- [data-flex-row-gap-xl="0.25"]{ row-gap:var(--t-spacing-fourth); }
4123
- [data-flex-row-gap-xl="0.5"]{ row-gap:var(--t-spacing-half); }
4124
- [data-flex-row-gap-xl="1"]{ row-gap:var(--t-spacing-1); }
4125
- [data-flex-row-gap-xl="1.5"]{ row-gap:var(--t-spacing-1-half); }
4126
- [data-flex-row-gap-xl="2"]{ row-gap:var(--t-spacing-2); }
4127
- [data-flex-row-gap-xl="3"]{ row-gap:var(--t-spacing-3); }
4128
- [data-flex-row-gap-xl="4"]{ row-gap:var(--t-spacing-4); }
4129
- [data-flex-row-gap-xl="5"]{ row-gap:var(--t-spacing-5); }
4130
- [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
4131
- [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
4132
-
4133
- [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
4134
- [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
4135
- [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
4136
- [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
4137
- [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
4138
- [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
4139
- [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
4140
- [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
4141
- [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
4142
- [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
4143
- [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4144
-
4145
- [data-flex-basis-xl="auto"]{ flex-basis:auto; }
4146
- [data-flex-basis-xl="0"]{ flex-basis:0; }
4147
- [data-flex-basis-xl="100%"]{ flex-basis:100%; }
4148
-
4149
- [data-padding-xl="0"]{ padding:0; }
4150
- [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
4151
- [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
4152
- [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
4153
- [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
4154
- [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
4155
- [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
4156
- [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
4157
- [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
4158
- [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
4159
- [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4160
-
4161
- [data-padding-block-xl="0"]{ padding-block:0; }
4162
- [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
4163
- [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
4164
- [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
4165
- [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
4166
- [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
4167
- [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
4168
- [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
4169
- [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
4170
- [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
4171
- [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4172
-
4173
- [data-padding-inline-xl="0"]{ padding-inline:0; }
4174
- [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4175
- [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
4176
- [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
4177
- [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4178
- [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
4179
- [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
4180
- [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
4181
- [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
4182
- [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
4183
- [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4184
- }
4185
-
4186
- .tds-segmented-control{
4187
- --tds-segmented-control-font-size:var(--t-font-size-md);
4188
- --tds-segmented-control-padding:var(--t-spacing-half);
4189
- --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4190
- --tds-segmented-control-icon-size:.66666667lh;
4191
- --tds-segmented-control-border-radius:var(--t-border-radius-md);
4192
- --tds-segmented-control-max-width:280px;
4193
- --tds-segmented-control-min-height:var(--t-container-size-md);
4194
- --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4195
- --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4196
- --tds-segmented-control-width:fit-content;
4197
-
4198
- display:flex;
4199
- flex-direction:column;
4200
- gap:var(--t-spacing-half);
4201
- align-items:flex-start;
4202
- width:var(--tds-segmented-control-width);
4203
- }
4204
-
4205
- .tds-segmented-control--sm{
4206
- --tds-segmented-control-font-size:var(--t-font-size-sm);
4207
- --tds-segmented-control-padding-inline:7px;
4208
- --tds-segmented-control-min-height:var(--t-container-size-sm);
4209
- }
4210
-
4211
- .tds-segmented-control--full-width{
4212
- --tds-segmented-control-width:100%;
4213
- --tds-segmented-control-max-width:none;
4214
- }
4215
-
4216
- .tds-segmented-control--full-width .tds-segmented-control-segment{
4217
- flex:1 1 0;
4218
- }
4219
-
4220
- .tds-segmented-control-label{
4221
- font-size:var(--tds-segmented-control-font-size);
4222
- font-weight:var(--t-font-weight-normal);
4223
- color:var(--t-text-color-headline);
4224
- }
4225
-
4226
- .tds-segmented-control-label--hidden{
4227
- position:absolute;
4228
- width:1px;
4229
- height:1px;
4230
- overflow:hidden;
4231
- white-space:nowrap;
4232
- clip-path:inset(50%);
4233
- }
4234
-
4235
- .tds-segmented-control-track{
4236
- display:inline-flex;
4237
- gap:var(--tds-segmented-control-track-gap);
4238
- width:var(--tds-segmented-control-width);
4239
- padding:var(--tds-segmented-control-padding);
4240
- background-color:var(--t-form-background-color);
4241
- border:1px solid var(--t-border-color);
4242
- border-radius:var(--tds-segmented-control-border-radius);
4243
- }
4244
-
4245
- .tds-segmented-control-segment{
4246
- --tds-segmented-control-color:var(--t-text-color-status-neutral);
4247
- --tds-segmented-control-background-color:transparent;
4248
-
4249
- display:inline-flex;
4250
- gap:var(--t-spacing-1);
4251
- align-items:center;
4252
- justify-content:center;
4253
- max-width:var(--tds-segmented-control-max-width);
4254
- min-height:var(--tds-segmented-control-min-height);
4255
- padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
4256
- padding-inline:var(--tds-segmented-control-padding-inline);
4257
- font:inherit;
4258
- font-size:var(--tds-segmented-control-font-size);
4259
- color:var(--tds-segmented-control-color);
4260
- text-align:center;
4261
- cursor:pointer;
4262
- -webkit-user-select:none;
4263
- -moz-user-select:none;
4264
- user-select:none;
4265
- background-color:var(--tds-segmented-control-background-color);
4266
- border:0;
4267
- border-radius:var(--t-border-radius-sm);
4268
- transition-timing-function:var(--t-ease-in-out);
4269
- transition-duration:var(--t-duration-200);
4270
- transition-property:color, background-color;
4271
- }
4272
-
4273
- .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
4274
- padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4275
- }
4276
-
4277
- .tds-segmented-control-segment .symbol{
4278
- display:block;
4279
- flex-shrink:0;
4280
- width:var(--tds-segmented-control-icon-size);
4281
- height:var(--tds-segmented-control-icon-size);
4282
- }
4283
-
4284
- .tds-segmented-control-segment:focus-visible{
4285
- outline:var(--t-focus-ring-outline);
4286
- outline-offset:var(--t-focus-ring-offset);
4287
- }
4276
+ [data-flex-row-gap-xl="0"]{ row-gap:0; }
4277
+ [data-flex-row-gap-xl="0.25"]{ row-gap:var(--t-spacing-fourth); }
4278
+ [data-flex-row-gap-xl="0.5"]{ row-gap:var(--t-spacing-half); }
4279
+ [data-flex-row-gap-xl="1"]{ row-gap:var(--t-spacing-1); }
4280
+ [data-flex-row-gap-xl="1.5"]{ row-gap:var(--t-spacing-1-half); }
4281
+ [data-flex-row-gap-xl="2"]{ row-gap:var(--t-spacing-2); }
4282
+ [data-flex-row-gap-xl="3"]{ row-gap:var(--t-spacing-3); }
4283
+ [data-flex-row-gap-xl="4"]{ row-gap:var(--t-spacing-4); }
4284
+ [data-flex-row-gap-xl="5"]{ row-gap:var(--t-spacing-5); }
4285
+ [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
4286
+ [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
4288
4287
 
4289
- .tds-segmented-control-segment[aria-checked="true"]{
4290
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
4291
- --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
4288
+ [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
4289
+ [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
4290
+ [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
4291
+ [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
4292
+ [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
4293
+ [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
4294
+ [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
4295
+ [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
4296
+ [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
4297
+ [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
4298
+ [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4292
4299
 
4293
- cursor:default;
4294
- }
4300
+ [data-flex-basis-xl="auto"]{ flex-basis:auto; }
4301
+ [data-flex-basis-xl="0"]{ flex-basis:0; }
4302
+ [data-flex-basis-xl="100%"]{ flex-basis:100%; }
4295
4303
 
4296
- .tds-segmented-control-segment:disabled{
4297
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
4298
- --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
4304
+ [data-padding-xl="0"]{ padding:0; }
4305
+ [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
4306
+ [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
4307
+ [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
4308
+ [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
4309
+ [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
4310
+ [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
4311
+ [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
4312
+ [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
4313
+ [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
4314
+ [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4299
4315
 
4300
- pointer-events:none;
4301
- }
4316
+ [data-padding-block-xl="0"]{ padding-block:0; }
4317
+ [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
4318
+ [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
4319
+ [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
4320
+ [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
4321
+ [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
4322
+ [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
4323
+ [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
4324
+ [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
4325
+ [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
4326
+ [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4302
4327
 
4303
- .tds-segmented-control-segment--interaction-subtle{
4304
- --tds-segmented-control-color-checked:var(--t-text-color-interaction);
4305
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
4306
- --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
4307
- --tds-segmented-control-background-color-disabled:transparent;
4328
+ [data-padding-inline-xl="0"]{ padding-inline:0; }
4329
+ [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4330
+ [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
4331
+ [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
4332
+ [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4333
+ [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
4334
+ [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
4335
+ [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
4336
+ [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
4337
+ [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
4338
+ [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4308
4339
  }
4309
4340
 
4310
4341
  .tds-pane{
@@ -4416,15 +4447,22 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4416
4447
 
4417
4448
  .tds-data-table-filters-active{
4418
4449
  display:flex;
4419
- -moz-column-gap:var(--tds-data-table-cell-padding-inline);
4420
- column-gap:var(--tds-data-table-cell-padding-inline);
4421
- justify-content:space-between;
4450
+ flex-direction:column;
4451
+ gap:var(--tds-data-table-cell-padding-block) var(--tds-data-table-cell-padding-inline);
4452
+ }
4453
+
4454
+ @media (min-width: 480px){
4455
+
4456
+ .tds-data-table-filters-active{
4457
+ flex-direction:row;
4422
4458
  }
4459
+ }
4423
4460
 
4424
4461
  .tds-data-table-filters-active-list{
4425
4462
  display:flex;
4426
4463
  flex-wrap:wrap;
4427
4464
  gap:var(--t-spacing-half);
4465
+ min-width:0;
4428
4466
  }
4429
4467
 
4430
4468
  .tds-data-table-filters-active-actions{
@@ -4448,6 +4486,10 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4448
4486
  --_data-table-filter-border-error:var(--t-border-color-status-error);
4449
4487
  }
4450
4488
  }
4489
+ .tds-btn-group--data-table-filters-chip,
4490
+ .tds-data-table-filters-chip-segments{
4491
+ min-width:0;
4492
+ }
4451
4493
 
4452
4494
  .tds-btn-group--data-table-filters-chip .tds-btn{
4453
4495
  --_chip-border-color:var(--_data-table-filter-border-info);
@@ -4464,35 +4506,76 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4464
4506
  transform:scale(.75);
4465
4507
  }
4466
4508
 
4467
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) span{
4468
- padding-inline:var(--tds-btn-padding-x);
4469
- border-inline-end:var(--t-border-width) solid var(--_chip-border-color);
4470
- transition-timing-function:var(--t-ease-in-out);
4471
- transition-duration:var(--t-duration-200);
4472
- transition-property:border-color;
4509
+ :is(.tds-btn-group--data-table-filters-chip .tds-btn):where(button):hover,:is(.tds-btn-group--data-table-filters-chip .tds-btn):where(button):active,:is(.tds-btn-group--data-table-filters-chip .tds-btn):where(button):focus{
4510
+ color:var(--t-text-color-interaction);
4511
+ background-color:var(--t-fill-color-status-info-ghost);
4512
+ border-color:var(--_chip-border-color);
4473
4513
  }
4474
4514
 
4475
- @media (prefers-reduced-motion: reduce){
4476
-
4477
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) span{
4478
- transition:none;
4479
- }
4480
- }
4515
+ .tds-data-table-filters-chip-segment{
4516
+ padding-inline:var(--tds-btn-padding-x);
4517
+ white-space:nowrap;
4518
+ border-inline-end:var(--t-border-width) solid var(--_chip-border-color);
4519
+ transition-timing-function:var(--t-ease-in-out);
4520
+ transition-duration:var(--t-duration-200);
4521
+ transition-property:border-color;
4522
+ }
4481
4523
 
4482
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) span:first-child{
4524
+ .tds-data-table-filters-chip-segment:first-child{
4483
4525
  padding-inline-start:0;
4484
4526
  }
4485
4527
 
4486
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) span:last-child{
4528
+ .tds-data-table-filters-chip-segment:last-child{
4487
4529
  padding-inline-end:0;
4488
4530
  border-inline-end-color:transparent;
4489
4531
  }
4490
4532
 
4491
- :is(.tds-btn-group--data-table-filters-chip .tds-btn):where(button):hover,:is(.tds-btn-group--data-table-filters-chip .tds-btn):where(button):active,:is(.tds-btn-group--data-table-filters-chip .tds-btn):where(button):focus{
4492
- color:var(--t-text-color-interaction);
4493
- background-color:var(--t-fill-color-status-info-ghost);
4494
- border-color:var(--_chip-border-color);
4533
+ @media (prefers-reduced-motion: reduce){
4534
+
4535
+ .tds-data-table-filters-chip-segment{
4536
+ transition:none;
4537
+ }
4538
+ }
4539
+ .tds-data-table-filters-chip-segment--scope,
4540
+ .tds-data-table-filters-chip-segment-text{
4541
+ min-width:0;
4542
+ overflow:hidden;
4543
+ text-overflow:ellipsis;
4544
+ }
4545
+ .tds-data-table-filters-chip-segment--value{
4546
+ display:flex;
4547
+ min-width:0;
4548
+ overflow:hidden;
4549
+ }
4550
+ .tds-data-table-filters-chip-segment-count{
4551
+ visibility:hidden;
4552
+ flex-shrink:0;
4553
+ max-inline-size:0;
4554
+ overflow:hidden;
4555
+ }
4556
+ @supports (animation-timeline: scroll()){
4557
+ .tds-data-table-filters-chip-segment--value{
4558
+ timeline-scope:--_filter-chip-value;
4559
+ }
4560
+
4561
+ .tds-data-table-filters-chip-segment-text{
4562
+ scroll-timeline:--_filter-chip-value inline;
4563
+ }
4564
+
4565
+ .tds-data-table-filters-chip-segment-count{
4566
+ animation:tds-data-table-filters-chip-segment-count linear both;
4567
+ animation-timeline:--_filter-chip-value;
4568
+ }
4569
+
4570
+ @keyframes tds-data-table-filters-chip-segment-count{
4571
+ from,
4572
+ to{
4573
+ visibility:visible;
4574
+ max-inline-size:none;
4575
+ margin-inline-start:.25em;
4576
+ }
4495
4577
  }
4578
+ }
4496
4579
 
4497
4580
  .tds-btn-group--data-table-filters-chip-inactive .tds-btn{
4498
4581
  --_chip-border-color:var(--t-border-color-button-neutral);
@@ -4586,17 +4669,63 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4586
4669
  border-radius:var(--t-border-radius);
4587
4670
  }
4588
4671
  .tds-data-table-frame-header{
4672
+ container:tds-data-table-header / inline-size;
4673
+ }
4674
+ .tds-data-table-frame-header-content{
4675
+ display:flex;
4676
+ flex-direction:column;
4677
+ }
4678
+
4679
+ .tds-data-table-frame-header-results,
4680
+ .tds-data-table-frame-header-controls{
4589
4681
  display:flex;
4590
4682
  gap:var(--t-spacing-1-half);
4591
4683
  align-items:center;
4592
4684
  padding-block:var(--tds-data-table-cell-padding-block);
4593
4685
  padding-inline:var(--tds-data-table-cell-padding-inline);
4594
4686
  }
4687
+ .tds-data-table-frame-header-results{
4688
+ flex:none;
4689
+ flex-wrap:wrap;
4690
+ }
4595
4691
  .tds-data-table-frame-header-controls{
4596
- display:flex;
4597
- gap:var(--t-spacing-1-half);
4598
- align-items:center;
4599
- margin-inline-start:auto;
4692
+ flex:1 1 auto;
4693
+ justify-content:safe flex-end;
4694
+ }
4695
+ .tds-data-table-frame-header-controls:not(:only-child){
4696
+ border-top:1px solid var(--tds-data-table-border-color);
4697
+ }
4698
+
4699
+ .tds-data-table-search{
4700
+ flex:1 1 auto;
4701
+ min-inline-size:0;
4702
+ }
4703
+ @container tds-data-table-header (width >= 720px){
4704
+ .tds-data-table-frame-header-content{
4705
+ flex-direction:row;
4706
+ gap:var(--t-spacing-1-half);
4707
+ align-items:center;
4708
+ }
4709
+
4710
+ .tds-data-table-frame-header-results{
4711
+ flex:0 1 auto;
4712
+ flex-wrap:nowrap;
4713
+ padding-inline-end:0;
4714
+ }
4715
+
4716
+ .tds-data-table-frame-header-controls{
4717
+ padding-inline-start:0;
4718
+ }
4719
+
4720
+ .tds-data-table-frame-header-controls:not(:only-child){
4721
+ border-top:none;
4722
+ }
4723
+
4724
+ .tds-data-table-search{
4725
+ flex:0 1 15rem;
4726
+ min-inline-size:10rem;
4727
+ contain:inline-size;
4728
+ }
4600
4729
  }
4601
4730
  .tds-data-table-frame-footer{
4602
4731
  padding-block:var(--tds-data-table-cell-padding-block);
@@ -4652,6 +4781,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4652
4781
  }
4653
4782
 
4654
4783
  .tds-data-table--sticky-header .tds-data-table-header{
4784
+ position:relative;
4655
4785
  z-index:1;
4656
4786
  animation-name:tds-data-table-sticky-header;
4657
4787
  animation-duration:auto;
@@ -4787,6 +4917,18 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4787
4917
  white-space:nowrap;
4788
4918
  clip-path:inset(50%);
4789
4919
  }
4920
+ .tds-data-table-filter-controls-add-label{
4921
+ white-space:nowrap;
4922
+ }
4923
+ @container tds-data-table-header (width < 720px){
4924
+ .tds-data-table-filter-controls-add-label{
4925
+ position:absolute;
4926
+ width:1px;
4927
+ height:1px;
4928
+ overflow:hidden;
4929
+ clip-path:inset(50%);
4930
+ }
4931
+ }
4790
4932
  .tds-data-table-cell{
4791
4933
  padding:var(--tds-data-table-cell-padding-block);
4792
4934
  padding-inline:var(--tds-data-table-cell-padding-inline);
@@ -5384,52 +5526,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5384
5526
  }
5385
5527
  }
5386
5528
 
5387
- .tds-helper-shelf{
5388
- --tds-helper-shelf-background-color:var(--t-fill-color-neutral-090);
5389
- --tds-helper-shelf-border-radius:var(--t-border-radius-md);
5390
- --tds-helper-shelf-color:var(--t-text-color);
5391
- --tds-helper-shelf-font-size:var(--t-font-size-sm);
5392
- --tds-helper-shelf-padding:var(--t-spacing-1);
5393
-
5394
- height:0;
5395
- overflow:hidden;
5396
- transition:height var(--t-duration-300) var(--t-ease-in);
5397
- }
5398
-
5399
- @media (prefers-reduced-motion: reduce){
5400
-
5401
- .tds-helper-shelf{
5402
- transition:none;
5403
- }
5404
- }
5405
-
5406
- .tds-helper-shelf--expanded{
5407
- height:auto;
5408
- transition-timing-function:var(--t-ease-out);
5409
- }
5410
-
5411
- @supports (interpolate-size: allow-keywords){
5412
- .tds-helper-shelf{
5413
- interpolate-size:allow-keywords;
5414
- }
5415
- }
5416
-
5417
- .tds-helper-shelf-content{
5418
- padding:var(--tds-helper-shelf-padding);
5419
- font-size:var(--tds-helper-shelf-font-size);
5420
- color:var(--tds-helper-shelf-color);
5421
- background:var(--tds-helper-shelf-background-color);
5422
- border-radius:var(--tds-helper-shelf-border-radius);
5423
- }
5424
-
5425
- .tds-helper-shelf-trigger{
5426
- --tds-helper-shelf-trigger-color-expanded:var(--t-text-color-interaction);
5427
- }
5428
-
5429
- .tds-helper-shelf-trigger[aria-expanded="true"]{
5430
- --tds-btn-color:var(--tds-helper-shelf-trigger-color-expanded);
5431
- }
5432
-
5433
5529
  .tds-filterable-list-box:has(input:disabled){
5434
5530
  --tds-filterable-list-box-cursor:not-allowed;
5435
5531
  }
@@ -5642,6 +5738,52 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5642
5738
  white-space:nowrap;
5643
5739
  }
5644
5740
 
5741
+ .tds-helper-shelf{
5742
+ --tds-helper-shelf-background-color:var(--t-fill-color-neutral-090);
5743
+ --tds-helper-shelf-border-radius:var(--t-border-radius-md);
5744
+ --tds-helper-shelf-color:var(--t-text-color);
5745
+ --tds-helper-shelf-font-size:var(--t-font-size-sm);
5746
+ --tds-helper-shelf-padding:var(--t-spacing-1);
5747
+
5748
+ height:0;
5749
+ overflow:hidden;
5750
+ transition:height var(--t-duration-300) var(--t-ease-in);
5751
+ }
5752
+
5753
+ @media (prefers-reduced-motion: reduce){
5754
+
5755
+ .tds-helper-shelf{
5756
+ transition:none;
5757
+ }
5758
+ }
5759
+
5760
+ .tds-helper-shelf--expanded{
5761
+ height:auto;
5762
+ transition-timing-function:var(--t-ease-out);
5763
+ }
5764
+
5765
+ @supports (interpolate-size: allow-keywords){
5766
+ .tds-helper-shelf{
5767
+ interpolate-size:allow-keywords;
5768
+ }
5769
+ }
5770
+
5771
+ .tds-helper-shelf-content{
5772
+ padding:var(--tds-helper-shelf-padding);
5773
+ font-size:var(--tds-helper-shelf-font-size);
5774
+ color:var(--tds-helper-shelf-color);
5775
+ background:var(--tds-helper-shelf-background-color);
5776
+ border-radius:var(--tds-helper-shelf-border-radius);
5777
+ }
5778
+
5779
+ .tds-helper-shelf-trigger{
5780
+ --tds-helper-shelf-trigger-color-expanded:var(--t-text-color-interaction);
5781
+ }
5782
+
5783
+ .tds-helper-shelf-trigger[aria-expanded="true"]{
5784
+ --tds-btn-color:var(--tds-helper-shelf-trigger-color-expanded);
5785
+ }
5786
+
5645
5787
  .symbol{
5646
5788
  display:inline-block;
5647
5789
  vertical-align:text-top;