@planningcenter/tapestry 4.10.0-rc.8 → 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 (107) 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.d.ts +3 -1
  19. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  20. package/dist/components/DataTable/DataTable.js +22 -13
  21. package/dist/components/DataTable/DataTable.js.map +1 -1
  22. package/dist/components/DataTable/FilterChip.d.ts +4 -3
  23. package/dist/components/DataTable/FilterChip.d.ts.map +1 -1
  24. package/dist/components/DataTable/FilterChip.js +24 -3
  25. package/dist/components/DataTable/FilterChip.js.map +1 -1
  26. package/dist/components/DataTable/FilterControls.d.ts.map +1 -1
  27. package/dist/components/DataTable/FilterControls.js +1 -1
  28. package/dist/components/DataTable/FilterControls.js.map +1 -1
  29. package/dist/components/DataTable/FilterTypes.d.ts +32 -8
  30. package/dist/components/DataTable/FilterTypes.d.ts.map +1 -1
  31. package/dist/components/DataTable/FocusFirstControl.d.ts +11 -0
  32. package/dist/components/DataTable/FocusFirstControl.d.ts.map +1 -0
  33. package/dist/components/DataTable/FocusFirstControl.js +31 -0
  34. package/dist/components/DataTable/FocusFirstControl.js.map +1 -0
  35. package/dist/components/DataTable/TableSearch.d.ts.map +1 -1
  36. package/dist/components/DataTable/TableSearch.js +1 -1
  37. package/dist/components/DataTable/TableSearch.js.map +1 -1
  38. package/dist/components/DataTable/collectionFilter.d.ts +14 -8
  39. package/dist/components/DataTable/collectionFilter.d.ts.map +1 -1
  40. package/dist/components/DataTable/collectionFilter.js +9 -5
  41. package/dist/components/DataTable/collectionFilter.js.map +1 -1
  42. package/dist/components/DataTable/dateFilter.d.ts +7 -3
  43. package/dist/components/DataTable/dateFilter.d.ts.map +1 -1
  44. package/dist/components/DataTable/dateFilter.js +9 -14
  45. package/dist/components/DataTable/dateFilter.js.map +1 -1
  46. package/dist/components/DataTable/dayFilter.d.ts +4 -3
  47. package/dist/components/DataTable/dayFilter.d.ts.map +1 -1
  48. package/dist/components/DataTable/dayFilter.js +11 -12
  49. package/dist/components/DataTable/dayFilter.js.map +1 -1
  50. package/dist/components/DataTable/filterKeys.d.ts +1 -1
  51. package/dist/components/DataTable/filterKeys.d.ts.map +1 -1
  52. package/dist/components/DataTable/index.d.ts +8 -3
  53. package/dist/components/DataTable/index.d.ts.map +1 -1
  54. package/dist/components/DataTable/numberFilter.d.ts +16 -3
  55. package/dist/components/DataTable/numberFilter.d.ts.map +1 -1
  56. package/dist/components/DataTable/numberFilter.js +41 -13
  57. package/dist/components/DataTable/numberFilter.js.map +1 -1
  58. package/dist/components/DataTable/presenceFilter.d.ts +4 -1
  59. package/dist/components/DataTable/presenceFilter.d.ts.map +1 -1
  60. package/dist/components/DataTable/presenceFilter.js +3 -3
  61. package/dist/components/DataTable/presenceFilter.js.map +1 -1
  62. package/dist/components/DataTable/scopedFilter.d.ts +2 -0
  63. package/dist/components/DataTable/scopedFilter.d.ts.map +1 -1
  64. package/dist/components/DataTable/scopedFilter.js +6 -3
  65. package/dist/components/DataTable/scopedFilter.js.map +1 -1
  66. package/dist/components/DataTable/textFilter.d.ts +3 -1
  67. package/dist/components/DataTable/textFilter.d.ts.map +1 -1
  68. package/dist/components/DataTable/textFilter.js +5 -9
  69. package/dist/components/DataTable/textFilter.js.map +1 -1
  70. package/dist/components/DataTable/useSearchFilter.d.ts +1 -1
  71. package/dist/components/DataTable/utils.d.ts +1 -0
  72. package/dist/components/DataTable/utils.d.ts.map +1 -1
  73. package/dist/components/DataTable/utils.js +1 -1
  74. package/dist/components/DataTable/utils.js.map +1 -1
  75. package/dist/components/segmented-control/IconSegment.d.ts +6 -1
  76. package/dist/components/segmented-control/IconSegment.d.ts.map +1 -1
  77. package/dist/components/segmented-control/IconSegment.js +1 -1
  78. package/dist/components/segmented-control/IconSegment.js.map +1 -1
  79. package/dist/components/segmented-control/Segment.d.ts +6 -1
  80. package/dist/components/segmented-control/Segment.d.ts.map +1 -1
  81. package/dist/components/segmented-control/Segment.js +1 -1
  82. package/dist/components/segmented-control/Segment.js.map +1 -1
  83. package/dist/components/segmented-control/SegmentBase.d.ts +1 -5
  84. package/dist/components/segmented-control/SegmentBase.d.ts.map +1 -1
  85. package/dist/components/segmented-control/SegmentBase.js.map +1 -1
  86. package/dist/components/segmented-control/SegmentedControl.d.ts +3 -9
  87. package/dist/components/segmented-control/SegmentedControl.d.ts.map +1 -1
  88. package/dist/components/segmented-control/SegmentedControl.js +3 -9
  89. package/dist/components/segmented-control/SegmentedControl.js.map +1 -1
  90. package/dist/components/segmented-control/index.d.ts +1 -0
  91. package/dist/components/segmented-control/index.d.ts.map +1 -1
  92. package/dist/index.css +155 -0
  93. package/dist/index.css.map +1 -1
  94. package/dist/index.d.ts +1 -0
  95. package/dist/index.d.ts.map +1 -1
  96. package/dist/index.js +3 -0
  97. package/dist/index.js.map +1 -1
  98. package/dist/reactRender.css +2182 -2002
  99. package/dist/reactRender.css.map +1 -1
  100. package/dist/reactRenderLegacy.css +2182 -2002
  101. package/dist/reactRenderLegacy.css.map +1 -1
  102. package/dist/unstable.css +210 -30
  103. package/dist/unstable.css.map +1 -1
  104. package/dist/unstable.d.ts +0 -1
  105. package/dist/unstable.d.ts.map +1 -1
  106. package/dist/unstable.js +3 -3
  107. 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,774 +1149,422 @@
954
1149
  }
955
1150
  }
956
1151
 
957
-
958
- @media (prefers-reduced-motion: no-preference){
959
-
960
- :root{
961
- interpolate-size:allow-keywords;
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;
962
1169
  }
1170
+
1171
+ .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1172
+ border-color:var(--tds-field-border-color-hover);
963
1173
  }
964
1174
 
965
- @layer tds-component{
966
- tds-sidenav,
967
- .tds-sidenav{
968
- --tds-sidenav-indent:12px;
969
- --tds-sidenav-item-depth:0;
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);
1179
+ }
970
1180
 
971
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1181
+ .tds-currency-input-control input{
1182
+ flex:1;
1183
+ min-inline-size:0;
1184
+ padding:0;
1185
+ font-family:inherit;
1186
+ font-size:inherit;
1187
+ color:inherit;
1188
+ -webkit-appearance:none;
1189
+ -moz-appearance:none;
1190
+ appearance:none;
1191
+ outline:0;
1192
+ background-color:transparent;
1193
+ border:0;
1194
+ }
972
1195
 
973
- --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;
974
- --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;
975
- --tds-sidenav-collapse-closed-opacity:0;
976
- --tds-sidenav-collapse-open-opacity:1;
977
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
978
- --tds-sidenav-collapse-open-transform:translateY(0);
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;
1200
+ }
979
1201
 
980
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
981
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
982
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
983
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
984
-
985
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
986
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
987
- --tds-sidenav-item-nested-background-selected:transparent;
988
-
989
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
990
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
991
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
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;
1207
+ }
992
1208
 
993
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
994
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
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;
995
1216
  }
996
1217
 
997
- @media (prefers-reduced-motion: reduce){
998
- tds-sidenav,
999
- .tds-sidenav{
1000
- --tds-sidenav-collapse-transition-enter:none;
1001
- --tds-sidenav-collapse-transition-exit:none;
1002
- --tds-sidenav-collapse-closed-transform:none;
1003
- --tds-sidenav-collapse-open-transform:none;
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);
1004
1222
  }
1005
- }
1006
1223
 
1007
- .tds-sidenav--theme-gray{
1008
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1009
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1010
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1011
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1012
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1013
- }
1014
- }
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);
1015
1228
 
1016
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1017
- display:flex;
1229
+ cursor:not-allowed;
1018
1230
  }
1019
1231
 
1020
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1021
- flex-direction:column;
1022
- gap:var(--t-spacing-half);
1023
- width:100%;
1232
+ .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
1233
+ color:var(--tds-field-color);
1234
+ }
1235
+
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);
1024
1241
  }
1025
1242
 
1026
- .tds-sidenav-section-list{
1027
- width:100%;
1028
- padding:0;
1029
- margin:0;
1030
- list-style:none;
1243
+ .tds-currency-input-control:has([readonly]):has(input:focus){
1244
+ border-color:var(--t-form-border-color-hover);
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%);
1031
1253
  }
1032
1254
 
1033
- .tds-sidenav-section-header{
1034
- display:flex;
1035
- align-items:baseline;
1036
- justify-content:space-between;
1037
- padding-top:var(--t-spacing-2);
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%);
1038
1266
  }
1039
1267
 
1040
- .tds-sidenav-section-header h2{
1041
- margin:0;
1042
- font-size:var(--t-font-size-sm);
1043
- font-weight:var(--t-font-weight-semibold);
1044
- line-height:1.35;
1045
- color:var(--t-text-color-secondary);
1046
- text-transform:uppercase;
1268
+ .tds-modal-overlay[data-entering]{
1269
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1047
1270
  }
1048
1271
 
1049
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1050
- padding-top:0;
1272
+ .tds-modal-overlay[data-exiting]{
1273
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1051
1274
  }
1052
1275
 
1053
- .tds-sidenav-section-header [slot="label-actions"]{
1054
- display:flex;
1055
- gap:var(--t-spacing-half);
1056
- align-items:center;
1276
+ @keyframes tds-modal-overlay-fade{
1277
+ from{
1278
+ opacity:0;
1057
1279
  }
1280
+ }
1058
1281
 
1059
- .tds-sidenav-section [slot="section-actions"]{
1282
+ .tds-modal-frame{
1283
+ --tds-modal-width:600px;
1284
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1060
1285
  display:flex;
1061
- gap:12px;
1062
- align-items:center;
1063
- min-height:42px;
1064
- padding:var(--t-spacing-1) 0;
1065
- }
1066
1286
 
1067
- .tds-sidenav-section-list,
1068
- .tds-sidenav-item{
1069
- width:100%;
1070
- padding:0;
1071
- margin:0;
1287
+ grid-row:2;
1288
+ justify-content:center;
1289
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1072
1290
  }
1073
1291
 
1074
- .tds-sidenav-item :is(a,button){
1075
- position:relative;
1076
- display:flex;
1077
- gap:12px;
1078
- align-items:center;
1079
- width:100%;
1080
- padding:12px;
1081
- overflow:hidden;
1082
- font-size:var(--t-font-size-sm);
1083
- line-height:18px;
1084
- color:var(--t-text-color-headline);
1085
- white-space:nowrap;
1086
- text-decoration:none;
1087
- -webkit-appearance:none;
1088
- -moz-appearance:none;
1089
- appearance:none;
1090
- cursor:pointer;
1091
- background-color:var(--tds-sidenav-item-background, transparent);
1092
- border:0;
1093
- border-radius:var(--t-border-radius);
1094
- transition:var(--tds-sidenav-item-transition);
1292
+ .tds-modal-frame[data-entering]{
1293
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1095
1294
  }
1096
1295
 
1097
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1098
- display:block;
1099
- flex:1;
1100
- overflow:hidden;
1101
- text-overflow:ellipsis;
1102
- text-align:left;
1103
- white-space:nowrap;
1104
- }
1105
-
1106
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1107
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1108
- color:var(--t-text-color-headline);
1109
- text-decoration:none;
1110
- }
1296
+ .tds-modal-frame[data-exiting]{
1297
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1298
+ }
1111
1299
 
1112
- :is(.tds-sidenav-item :is(a,button)):active{
1113
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1114
- }
1300
+ .tds-modal-frame--sm{
1301
+ --tds-modal-width:400px;
1302
+ }
1115
1303
 
1116
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1117
- overflow:hidden;
1118
- color:var(--tds-sidenav-item-icon-color);
1119
- }
1304
+ .tds-modal-frame--lg{
1305
+ --tds-modal-width:800px;
1306
+ }
1120
1307
 
1121
- :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{
1122
- display:block;
1123
- width:var(--tds-sidenav-item-icon-size);
1124
- height:var(--tds-sidenav-item-icon-size);
1125
- }
1308
+ .tds-modal-frame--xl{
1309
+ --tds-modal-width:1000px;
1310
+ }
1126
1311
 
1127
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1128
- --tds-sidenav-indent:19px;
1129
- }
1312
+ @keyframes tds-modal-zoom{
1313
+ from{
1314
+ opacity:0;
1315
+ scale:.96;
1316
+ }
1317
+ }
1130
1318
 
1131
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1132
- visibility:visible;
1133
- block-size:auto;
1134
- opacity:1;
1135
- }
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;
1325
+ }
1326
+ }
1136
1327
 
1137
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1138
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1139
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
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);
1140
1335
 
1141
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1142
- font-weight:var(--t-font-weight-semibold);
1143
- }
1336
+ border:0;
1337
+ border-radius:var(--t-border-radius-lg);
1338
+ box-shadow:0 4px 18px 0 #0003;
1339
+ }
1144
1340
 
1145
- .tds-sidenav-item:has(.tds-sidenav-section){
1146
- display:flex;
1147
- flex-direction:column;
1148
- gap:var(--t-spacing-half);
1341
+ .tds-modal:focus{
1342
+ outline:none;
1149
1343
  }
1150
1344
 
1151
- .tds-sidenav-item .tds-sidenav-section-list{
1152
- --tds-sidenav-item-depth:1;
1153
- gap:0;
1154
- }
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
+ }
1155
1353
 
1156
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1157
- visibility:hidden;
1158
- block-size:0;
1159
- overflow-y:clip;
1160
- opacity:0;
1161
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1162
- }
1163
-
1164
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1165
- --tds-sidenav-item-depth:2;
1166
- }
1167
-
1168
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1169
- min-height:var(--t-element-size-2xl);
1170
- padding-block:9px;
1171
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1172
- line-height:1;
1173
- background-color:transparent;
1174
- }
1175
-
1176
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1177
- position:absolute;
1178
- top:0;
1179
- bottom:0;
1180
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1181
- width:2px;
1182
- content:"";
1183
- background-color:var(--tds-sidenav-item-nested-border-color);
1184
- transition:var(--tds-sidenav-item-transition);
1185
- }
1186
-
1187
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1188
- position:absolute;
1189
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1190
- z-index:-1;
1191
- height:100%;
1192
- content:"";
1193
- background-color:var(--tds-sidenav-item-nested-background);
1194
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1195
- transition:var(--tds-sidenav-item-transition);
1196
- }
1354
+ .tds-modal-title{
1355
+ grid-row:1;
1356
+ grid-column:1;
1357
+ margin:0;
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);
1362
+ }
1197
1363
 
1198
- :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)){
1199
- display:block;
1200
- text-align:left;
1201
- white-space:normal;
1202
- }
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);
1372
+ }
1203
1373
 
1204
- :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{
1205
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1206
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1207
- }
1374
+ .tds-modal-close{
1375
+ grid-row:1;
1376
+ grid-column:2;
1377
+ align-self:center;
1378
+ color:var(--t-icon-color-dim);
1379
+ }
1208
1380
 
1209
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1210
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1211
- }
1381
+ .tds-modal-body{
1382
+ padding-block:var(--t-spacing-3);
1383
+ padding-inline:var(--t-spacing-4);
1384
+ }
1212
1385
 
1213
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1214
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1215
- font-weight:var(--t-font-weight-medium);
1216
- }
1386
+ .tds-modal-body--full-width{
1387
+ padding-inline:0;
1388
+ }
1217
1389
 
1218
- .tds-sidenav-responsive-header{
1390
+ .tds-modal-footer{
1219
1391
  display:flex;
1220
1392
  gap:var(--t-spacing-2);
1221
1393
  align-items:center;
1222
- width:100%;
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);
1223
1398
  }
1224
1399
 
1225
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1226
- order:0;
1227
- }
1400
+ .tds-modal-footer > [slot="start"]{
1401
+ margin-inline-end:auto;
1402
+ }
1228
1403
 
1229
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1230
- flex:1;
1231
- order:1;
1232
- margin:0;
1233
- font-size:var(--t-font-size-lg);
1234
- font-weight:var(--t-font-weight-medium);
1235
- color:var(--t-text-color-headline);
1404
+ @media (min-width: 720px){
1405
+ .tds-modal-overlay{
1406
+ --tds-modal-min-margin-block:0;
1236
1407
  }
1237
1408
 
1238
- @media (max-width: 719px){
1239
- .tds-sidenav-collapse{
1240
- z-index:10001;
1241
- display:none;
1242
- max-width:min(448px, calc(100vw - 48px));
1243
- padding:0;
1244
- margin:12px 0;
1245
- position-area:bottom span-right;
1246
- overflow:hidden;
1247
- outline:0;
1409
+ .tds-modal-footer{
1410
+ position:sticky;
1411
+ bottom:0;
1248
1412
  background:var(--t-surface-color-card);
1249
- border:0;
1250
- border-radius:6px;
1251
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1252
- opacity:var(--tds-sidenav-collapse-open-opacity);
1253
- transform:var(--tds-sidenav-collapse-open-transform);
1254
- transition:var(--tds-sidenav-collapse-transition-enter);
1255
- will-change:transform;
1413
+ border-end-start-radius:var(--t-border-radius-lg);
1414
+ border-end-end-radius:var(--t-border-radius-lg);
1256
1415
  }
1416
+ }
1257
1417
 
1258
- .tds-sidenav-scroll-container{
1259
- --webkit-overflow-scrolling:touch;
1260
- display:block;
1261
- width:100%;
1262
- height:-moz-fit-content;
1263
- height:fit-content;
1264
- padding:var(--t-spacing-2);
1265
- overflow-y:auto;
1266
- }
1267
1418
 
1268
- .tds-sidenav-item :is(a, button) :is(.prefix){
1269
- display:none;
1270
- }
1271
- @supports selector(:popover-open){
1272
- .tds-sidenav-collapse:popover-open{
1273
- display:flex;
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;
1274
1422
  }
1275
1423
 
1276
- .tds-sidenav-collapse:not(:popover-open){
1277
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1278
- transition:var(--tds-sidenav-collapse-transition-exit);
1424
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1425
+ inline-size:1em;
1426
+ block-size:2em;
1279
1427
  }
1280
1428
 
1281
- @starting-style{
1282
- .tds-sidenav-collapse:popover-open{
1283
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1284
- transform:var(--tds-sidenav-collapse-closed-transform);
1285
- }
1429
+ [type="file"]:is(.tds-input input){
1430
+ padding-block:var(--t-spacing-half);
1431
+ padding-inline-start:var(--t-spacing-half);
1286
1432
  }
1433
+
1434
+ [type="file"]:is(.tds-input input):not(:disabled){
1435
+ color:var(--t-text-color-secondary);
1436
+ }
1437
+
1438
+ [type="file"]:is(.tds-input input)::file-selector-button{
1439
+ --_file-btn-padding-block:3px;
1440
+
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
+ }
1455
+
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
+ }
1460
+
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
+ }
1465
+
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);
1287
1477
  }
1288
- @supports not selector(:popover-open){
1289
- .tds-sidenav-collapse.\:popover-open{
1290
- display:flex;
1291
- }
1292
1478
 
1293
- .tds-sidenav-collapse:not(.\:popover-open){
1294
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1295
- transition:var(--tds-sidenav-collapse-transition-exit);
1296
- }
1479
+ .tds-input--auto-width input{
1480
+ field-sizing:content;
1481
+ inline-size:auto;
1297
1482
  }
1298
1483
  }
1299
1484
 
1300
- @media (min-width: 720px){
1301
- .tds-sidenav-responsive-header{
1302
- display:none;
1303
- }
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);
1304
1497
  }
1305
1498
 
1306
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1307
- display:none;
1499
+ @media (prefers-reduced-motion: no-preference){
1500
+ .tds-popover[data-entering]{
1501
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1308
1502
  }
1309
1503
 
1310
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1311
- display:block;
1504
+ .tds-popover[data-exiting]{
1505
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1312
1506
  }
1313
1507
 
1314
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1315
- display:flex;
1316
- flex-direction:column;
1508
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
1509
+ will-change:opacity, transform;
1317
1510
  }
1318
1511
 
1319
- .tds-button-group{
1320
- display:inline-flex;
1321
- }
1322
- .tds-button-group > .tds-btn{
1323
- --tds-button-group-item-z-index:1;
1324
-
1325
- position:relative;
1326
- z-index:var(--tds-button-group-item-z-index);
1327
- border-radius:0;
1328
- }
1329
- :is(.tds-button-group > .tds-btn):not(:first-child){
1330
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1331
- }
1332
- :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{
1333
- position:absolute;
1334
- inset-block:calc(var(--tds-btn-border-width) * -1);
1335
- width:var(--tds-btn-border-width);
1336
- pointer-events:none;
1337
- content:"";
1338
- background-color:var(--t-border-color-white);
1339
- }
1340
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1341
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1342
- }
1343
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1344
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1345
- }
1346
- :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1347
- --tds-button-group-item-z-index:2;
1348
- }
1349
- :is(.tds-button-group > .tds-btn):focus-visible{
1350
- --tds-button-group-item-z-index:5;
1351
- }
1352
- .tds-button-group > .tds-btn:first-child{
1353
- border-start-start-radius:var(--tds-btn-border-radius);
1354
- border-end-start-radius:var(--tds-btn-border-radius);
1355
- }
1356
- .tds-button-group > .tds-btn:last-child{
1357
- border-start-end-radius:var(--tds-btn-border-radius);
1358
- border-end-end-radius:var(--tds-btn-border-radius);
1359
- }
1360
-
1361
- .tds-checkbox{
1362
- --tds-checkbox-font-size:var(--t-font-size-md);
1363
- --tds-checkbox-cursor:pointer;
1364
- --tds-checkbox-line-height:1.4;
1365
- --tds-checkbox-transition-property:background-color, border-color;
1366
-
1367
- --tds-checkbox-input-size:var(--t-element-size-md);
1368
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1369
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1370
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1371
-
1372
- --tds-checkbox-input-icon:none;
1373
- --tds-checkbox-input-icon-visibility:hidden;
1374
- --tds-checkbox-input-icon-opacity:0;
1375
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1376
-
1377
- --tds-checkbox-label-color:var(--t-form-color);
1378
-
1379
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1380
- --tds-checkbox-description-line-height:1.35;
1381
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1382
- --tds-checkbox-description-invalid-icon-display:none;
1383
-
1384
- position:relative;
1385
- display:inline-grid;
1386
- grid-template-columns:auto;
1387
- grid-auto-columns:1fr;
1388
- gap:var(--t-spacing-fourth) 0;
1389
- line-height:var(--tds-checkbox-line-height);
1390
- -webkit-user-select:none;
1391
- -moz-user-select:none;
1392
- user-select:none;
1393
- }
1394
-
1395
- .tds-checkbox label{
1396
- grid-area:1 / 2;
1397
- padding-inline-start:var(--t-spacing-1);
1398
- font-size:var(--tds-checkbox-font-size);
1399
- font-weight:var(--t-font-weight-normal);
1400
- color:var(--tds-checkbox-label-color);
1401
- cursor:var(--tds-checkbox-cursor);
1402
- }
1403
-
1404
- .tds-checkbox tds-indeterminate{
1405
- display:flex;
1406
- }
1407
-
1408
- .tds-checkbox input[type="checkbox"]{
1409
- position:relative;
1410
- width:1em;
1411
- height:1em;
1412
- margin:calc((1lh - 1em) / 2) 0 0;
1413
- font-size:var(--tds-checkbox-font-size);
1414
- line-height:inherit;
1415
- -webkit-appearance:none;
1416
- -moz-appearance:none;
1417
- appearance:none;
1418
- cursor:var(--tds-checkbox-cursor);
1419
- background-color:var(--tds-checkbox-input-background-color);
1420
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1421
- border-radius:var(--tds-checkbox-input-border-radius);
1422
- transition-timing-function:var(--t-ease-in-out);
1423
- transition-duration:var(--t-duration-200);
1424
- transition-property:var(--tds-checkbox-transition-property);
1425
- }
1426
-
1427
- :is(.tds-checkbox input[type="checkbox"])::before{
1428
- position:absolute;
1429
- top:50%;
1430
- left:50%;
1431
- visibility:var(--tds-checkbox-input-icon-visibility);
1432
- width:100%;
1433
- height:100%;
1434
- content:"";
1435
- background-color:var(--tds-checkbox-input-icon-fill);
1436
- border-radius:var(--tds-checkbox-input-border-radius);
1437
- opacity:var(--tds-checkbox-input-icon-opacity);
1438
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1439
- mask-image:var(--tds-checkbox-input-icon);
1440
- -webkit-mask-repeat:no-repeat;
1441
- mask-repeat:no-repeat;
1442
- -webkit-mask-size:contain;
1443
- mask-size:contain;
1444
- transform:translate(-50%, -50%);
1445
- }
1446
-
1447
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1448
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1449
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1450
- }
1451
-
1452
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1453
- outline:var(--t-focus-ring-outline);
1454
- outline-offset:var(--t-focus-ring-offset);
1455
- }
1456
-
1457
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1458
- pointer-events:none;
1459
- }
1460
-
1461
- @media (prefers-reduced-motion: reduce){
1462
-
1463
- .tds-checkbox input[type="checkbox"]{
1464
- --tds-checkbox-transition-property:none;
1465
- }
1466
- }
1467
-
1468
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1469
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1470
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1471
- --tds-checkbox-input-icon-visibility:visible;
1472
- --tds-checkbox-input-icon-opacity:1;
1473
- }
1474
-
1475
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1476
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1477
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1478
- }
1479
-
1480
- .tds-checkbox:has(input:checked){
1481
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1482
- }
1483
-
1484
- .tds-checkbox:has(input:indeterminate){
1485
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1486
- }
1487
-
1488
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1489
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1490
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1491
- --tds-checkbox-description-invalid-icon-display:inline-block;
1492
- }
1493
-
1494
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1495
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1496
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1497
- }
1498
-
1499
- :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{
1500
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1501
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1502
- }
1503
-
1504
- :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){
1505
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1506
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1507
- }
1508
-
1509
- .tds-checkbox:has(input:required) label::after{
1510
- margin-left:.25ch;
1511
- color:var(--t-text-color-status-error);
1512
- content:"*";
1512
+ @keyframes tds-popover{
1513
+ from{
1514
+ opacity:0;
1515
+ transform:translateY(-8px);
1513
1516
  }
1514
-
1515
- .tds-checkbox:has(input:disabled){
1516
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1517
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1518
-
1519
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1520
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1521
- --tds-checkbox-cursor:not-allowed;
1522
1517
  }
1523
-
1524
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1525
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1526
- }
1527
-
1528
- .tds-checkbox-description{
1529
- display:flex;
1530
- grid-area:2 / 2;
1531
- gap:var(--t-spacing-half);
1532
- align-items:flex-start;
1533
- padding-inline-start:var(--t-spacing-1);
1534
- margin:0;
1535
- font-size:var(--tds-checkbox-description-font-size);
1536
- line-height:var(--tds-checkbox-description-line-height);
1537
- color:var(--tds-checkbox-description-color);
1538
- cursor:text;
1539
1518
  }
1540
1519
 
1541
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1542
- display:var(--tds-checkbox-description-invalid-icon-display);
1543
- flex-shrink:0;
1544
- margin-top:calc(.5lh - .5em);
1545
- line-height:var(--tds-checkbox-description-line-height);
1546
- }
1547
-
1548
- .tds-checkbox--sm{
1549
- --tds-checkbox-line-height:1.35;
1550
- --tds-checkbox-input-size:var(--t-element-size-sm);
1551
- --tds-checkbox-font-size:var(--t-font-size-sm);
1552
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1553
- --tds-checkbox-description-line-height:1.3;
1554
- }
1555
-
1556
- .tds-checkbox-group{
1557
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1558
- --tds-checkbox-group-line-height:1.4;
1559
- --tds-checkbox-group-gap:var(--t-spacing-1);
1560
-
1561
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1562
- --tds-checkbox-group-description-line-height:1.35;
1563
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1564
- --tds-checkbox-group-description-invalid-icon-display:none;
1520
+ .tds-popover-content{
1565
1521
  display:flex;
1566
1522
  flex-direction:column;
1567
- gap:0;
1568
- padding:0;
1569
- margin:0;
1570
-
1571
- font-size:var(--tds-checkbox-group-font-size);
1572
- line-height:var(--tds-checkbox-group-line-height);
1573
- border:0;
1523
+ padding:var(--t-spacing-1);
1524
+ outline:0;
1574
1525
  }
1575
1526
 
1576
- .tds-checkbox-group legend{
1577
- float:left;
1578
- padding:0;
1579
- margin:0;
1580
- }
1581
-
1582
- .tds-checkbox-group[aria-invalid="true"]{
1583
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1584
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1585
- }
1586
-
1587
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1588
- margin-left:.25ch;
1589
- color:var(--t-text-color-status-error);
1590
- content:"*";
1591
- }
1592
-
1593
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1594
- content:none;
1595
- }
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;
1596
1538
 
1597
- .tds-checkbox-group-fields{
1598
1539
  display:flex;
1599
1540
  flex-direction:column;
1600
- gap:var(--tds-checkbox-group-gap);
1601
- align-items:flex-start;
1602
- margin-top:var(--t-spacing-1);
1603
- }
1604
-
1605
- .tds-checkbox-group-description{
1606
- display:flex;
1607
1541
  gap:var(--t-spacing-half);
1608
1542
  align-items:flex-start;
1609
- margin:var(--t-spacing-fourth) 0 0;
1610
- font-size:var(--tds-checkbox-group-description-font-size);
1611
- line-height:var(--tds-checkbox-group-description-line-height);
1612
- color:var(--tds-checkbox-group-description-color);
1613
- cursor:text;
1543
+ width:var(--tds-segmented-control-width);
1614
1544
  }
1615
1545
 
1616
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1617
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1618
- flex-shrink:0;
1619
- margin-top:calc(.5lh - .5em);
1620
- line-height:var(--tds-checkbox-group-description-line-height);
1621
- }
1622
-
1623
- .tds-checkbox-group--sm{
1624
- --tds-checkbox-group-line-height:1.35;
1625
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1626
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1627
- --tds-checkbox-group-description-line-height:1.3;
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);
1628
1550
  }
1629
1551
 
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;
1552
+ .tds-segmented-control--full-width{
1553
+ --tds-segmented-control-width:100%;
1554
+ --tds-segmented-control-max-width:none;
1647
1555
  }
1648
1556
 
1649
- .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1650
- border-color:var(--tds-field-border-color-hover);
1651
- }
1652
-
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
- }
1658
-
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;
1666
- -webkit-appearance:none;
1667
- -moz-appearance:none;
1668
- appearance:none;
1669
- outline:0;
1670
- background-color:transparent;
1671
- border:0;
1672
- }
1673
-
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;
1678
- }
1679
-
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;
1685
- }
1686
-
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
- }
1695
-
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
- }
1701
-
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);
1706
-
1707
- cursor:not-allowed;
1557
+ .tds-segmented-control--full-width .tds-segmented-control-segment{
1558
+ flex:1 1 0;
1708
1559
  }
1709
1560
 
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);
1719
- }
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
+ }
1720
1566
 
1721
- .tds-currency-input-control:has([readonly]):has(input:focus){
1722
- border-color:var(--t-form-border-color-hover);
1723
- }
1724
- .tds-currency-input-currency-name--hidden{
1567
+ .tds-segmented-control-label--hidden{
1725
1568
  position:absolute;
1726
1569
  width:1px;
1727
1570
  height:1px;
@@ -1730,276 +1573,333 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1730
1573
  clip-path:inset(50%);
1731
1574
  }
1732
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
+ }
1733
1585
 
1734
- :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{
1735
- -webkit-appearance:none;
1736
- appearance:none;
1737
- }
1738
-
1739
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1740
- inline-size:1em;
1741
- block-size:2em;
1742
- }
1743
-
1744
- [type="file"]:is(.tds-input input){
1745
- padding-block:var(--t-spacing-half);
1746
- padding-inline-start:var(--t-spacing-half);
1747
- }
1748
-
1749
- [type="file"]:is(.tds-input input):not(:disabled){
1750
- color:var(--t-text-color-secondary);
1751
- }
1752
-
1753
- [type="file"]:is(.tds-input input)::file-selector-button{
1754
- --_file-btn-padding-block:3px;
1755
-
1756
- padding-block:var(--_file-btn-padding-block);
1757
- padding-inline:12px;
1758
- margin-inline-end:12px;
1759
- font:inherit;
1760
- 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));
1761
- color:var(--t-text-color-status-neutral);
1762
- cursor:pointer;
1763
- background-color:var(--t-fill-color-button-neutral-solid);
1764
- border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1765
- border-radius:var(--t-border-radius-md);
1766
- transition-timing-function:var(--t-ease-in-out);
1767
- transition-duration:var(--t-duration-200);
1768
- transition-property:color, background-color, border-color;
1769
- }
1770
-
1771
- [type="file"]:is(.tds-input input):hover::file-selector-button{
1772
- background-color:var(--t-fill-color-button-neutral-solid-hover);
1773
- border-color:var(--t-fill-color-button-neutral-solid-hover);
1774
- }
1586
+ .tds-segmented-control-segment{
1587
+ --tds-segmented-control-color:var(--t-text-color-status-neutral);
1588
+ --tds-segmented-control-background-color:transparent;
1775
1589
 
1776
- [type="file"]:is(.tds-input input):active::file-selector-button{
1777
- background-color:var(--t-fill-color-button-neutral-solid-active);
1778
- border-color:var(--t-fill-color-button-neutral-solid-active);
1779
- }
1590
+ display:inline-flex;
1591
+ gap:var(--t-spacing-1);
1592
+ align-items:center;
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;
1612
+ }
1780
1613
 
1781
- [type="file"]:is(.tds-input input):disabled::file-selector-button{
1782
- color:var(--t-text-color-disabled);
1783
- pointer-events:none;
1784
- background-color:var(--t-fill-color-button-neutral-solid-disabled);
1785
- border-color:var(--t-fill-color-button-neutral-solid-disabled);
1786
- }
1787
- @supports (field-sizing: content){
1788
- .tds-input--auto-width{
1789
- inline-size:-moz-fit-content;
1790
- inline-size:fit-content;
1791
- min-inline-size:min(100%, 122px);
1614
+ .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
1615
+ padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
1792
1616
  }
1793
1617
 
1794
- .tds-input--auto-width input{
1795
- field-sizing:content;
1796
- inline-size:auto;
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);
1797
1623
  }
1798
- }
1799
1624
 
1800
- .tds-modal-overlay{
1801
- --tds-modal-min-margin-block:var(--t-spacing-3);
1802
-
1803
- position:fixed;
1804
- inset:0;
1805
- z-index:1000;
1806
- display:grid;
1807
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1808
- justify-items:center;
1809
- overflow-y:auto;
1810
- background:hsl(0 0% 0% / 40%);
1811
- }
1625
+ .tds-segmented-control-segment:focus-visible{
1626
+ outline:var(--t-focus-ring-outline);
1627
+ outline-offset:var(--t-focus-ring-offset);
1628
+ }
1812
1629
 
1813
- .tds-modal-overlay[data-entering]{
1814
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1630
+ .tds-segmented-control-segment:hover{
1631
+ --tds-segmented-control-background-color:var(--t-fill-color-button-neutral-ghost-hover);
1815
1632
  }
1816
1633
 
1817
- .tds-modal-overlay[data-exiting]{
1818
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
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);
1637
+
1638
+ cursor:default;
1819
1639
  }
1820
1640
 
1821
- @keyframes tds-modal-overlay-fade{
1822
- from{
1823
- opacity:0;
1641
+ .tds-segmented-control-segment:disabled{
1642
+ --tds-segmented-control-background-color:transparent;
1643
+ --tds-segmented-control-color:var(--t-text-color-disabled);
1644
+
1645
+ pointer-events:none;
1824
1646
  }
1825
- }
1826
1647
 
1827
- .tds-modal-frame{
1828
- --tds-modal-width:600px;
1829
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1830
- display:flex;
1648
+ .tds-segmented-control-segment[aria-checked="true"]:disabled{
1649
+ --tds-segmented-control-background-color:var(--t-fill-color-button-neutral-solid-disabled);
1650
+ }
1831
1651
 
1832
- grid-row:2;
1833
- justify-content:center;
1834
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
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);
1835
1655
  }
1836
1656
 
1837
- .tds-modal-frame[data-entering]{
1838
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1839
- }
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);
1660
+ }
1840
1661
 
1841
- .tds-modal-frame[data-exiting]{
1842
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1843
- }
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
+ }
1844
1666
 
1845
- .tds-modal-frame--sm{
1846
- --tds-modal-width:400px;
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);
1847
1670
  }
1848
1671
 
1849
- .tds-modal-frame--lg{
1850
- --tds-modal-width:800px;
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);
1851
1675
  }
1852
1676
 
1853
- .tds-modal-frame--xl{
1854
- --tds-modal-width:1000px;
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);
1855
1680
  }
1856
1681
 
1857
- @keyframes tds-modal-zoom{
1858
- from{
1859
- opacity:0;
1860
- scale:.96;
1861
- }
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;
1687
+
1688
+ --tds-toggle-switch-label-color:var(--t-form-color);
1689
+
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;
1862
1712
  }
1863
1713
 
1864
- @media (prefers-reduced-motion: reduce){
1865
- .tds-modal-overlay[data-entering],
1866
- .tds-modal-overlay[data-exiting],
1867
- .tds-modal-frame[data-entering],
1868
- .tds-modal-frame[data-exiting]{
1869
- animation:none;
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;
1719
+ -webkit-appearance:none;
1720
+ -moz-appearance:none;
1721
+ appearance:none;
1722
+ cursor:var(--tds-toggle-switch-cursor);
1723
+ outline:var(--tds-toggle-switch-track-outline);
1724
+ outline-offset:var(--t-focus-ring-offset);
1725
+ background-color:transparent;
1726
+ border:0;
1727
+ border-radius:var(--t-border-radius-round);
1870
1728
  }
1871
- }
1872
1729
 
1873
- .tds-modal{
1874
- display:flex;
1875
- flex-direction:column;
1876
- width:100%;
1877
- padding-block-start:var(--t-spacing-3);
1878
- padding-inline:0;
1879
- background:var(--t-surface-color-card);
1730
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1731
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1732
+ }
1880
1733
 
1881
- border:0;
1882
- border-radius:var(--t-border-radius-lg);
1883
- box-shadow:0 4px 18px 0 #0003;
1884
- }
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
+ }
1885
1745
 
1886
- .tds-modal:focus{
1887
- outline:none;
1746
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1747
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1888
1748
  }
1889
1749
 
1890
- .tds-modal-header{
1891
- display:grid;
1892
- grid-template-columns:1fr auto;
1893
- -moz-column-gap:var(--t-spacing-2);
1894
- column-gap:var(--t-spacing-2);
1895
- padding-block:0;
1896
- padding-inline:var(--t-spacing-4);
1897
- }
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
+ }
1898
1754
 
1899
- .tds-modal-title{
1900
- grid-row:1;
1901
- grid-column:1;
1902
- margin:0;
1903
- font-size:var(--t-font-size-2xl);
1904
- font-weight:var(--t-font-weight-medium);
1905
- line-height:140%;
1906
- color:var(--t-text-color-headline);
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);
1757
+ }
1758
+
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);
1907
1774
  }
1908
1775
 
1909
- .tds-modal-subtitle{
1910
- grid-row:2;
1911
- grid-column:1;
1912
- margin:0;
1913
- font-size:var(--t-font-size-md);
1914
- font-weight:var(--t-font-weight-medium);
1915
- line-height:140%;
1916
- color:var(--t-text-color-secondary);
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;
1917
1794
  }
1795
+ }
1918
1796
 
1919
- .tds-modal-close{
1920
- grid-row:1;
1921
- grid-column:2;
1922
- align-self:center;
1923
- color:var(--t-icon-color-dim);
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;
1924
1807
  }
1925
1808
 
1926
- .tds-modal-body{
1927
- padding-block:var(--t-spacing-3);
1928
- padding-inline:var(--t-spacing-4);
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;
1929
1816
  }
1930
1817
 
1931
- .tds-modal-body--full-width{
1932
- padding-inline:0;
1818
+ .tds-toggle-switch--hide-label{
1819
+ --tds-toggle-switch-display:inline-flex;
1933
1820
  }
1934
1821
 
1935
- .tds-modal-footer{
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);
1826
+
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;
1936
1831
  display:flex;
1937
- gap:var(--t-spacing-2);
1938
- align-items:center;
1939
- justify-content:flex-end;
1940
- padding-block:var(--t-spacing-3);
1941
- padding-inline:var(--t-spacing-4);
1942
- border-top:1px solid var(--t-border-color);
1943
- }
1832
+ flex-direction:column;
1833
+ gap:0;
1834
+ padding:0;
1835
+ margin:0;
1944
1836
 
1945
- .tds-modal-footer > [slot="start"]{
1946
- margin-inline-end:auto;
1837
+ font-size:var(--tds-radio-group-font-size);
1838
+ line-height:var(--tds-radio-group-line-height);
1839
+ border:0;
1947
1840
  }
1948
1841
 
1949
- @media (min-width: 720px){
1950
- .tds-modal-overlay{
1951
- --tds-modal-min-margin-block:0;
1842
+ .tds-radio-group legend{
1843
+ float:left;
1844
+ padding:0;
1845
+ margin:0;
1952
1846
  }
1953
1847
 
1954
- .tds-modal-footer{
1955
- position:sticky;
1956
- bottom:0;
1957
- background:var(--t-surface-color-card);
1958
- border-end-start-radius:var(--t-border-radius-lg);
1959
- border-end-end-radius:var(--t-border-radius-lg);
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;
1960
1851
  }
1961
- }
1962
1852
 
1963
- .tds-popover{
1964
- max-inline-size:24rem;
1965
- overflow:auto;
1966
- overscroll-behavior:none;
1967
- outline:0;
1968
- scrollbar-color:#0004 var(--t-surface-color-card);
1969
- scrollbar-width:thin;
1970
- background:var(--t-surface-color-card);
1971
- background-clip:padding-box;
1972
- border:1px solid var(--t-border-color);
1973
- border-radius:var(--t-border-radius);
1974
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1975
- }
1976
-
1977
- @media (prefers-reduced-motion: no-preference){
1978
- .tds-popover[data-entering]{
1979
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1853
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1854
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1980
1855
  }
1981
1856
 
1982
- .tds-popover[data-exiting]{
1983
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1984
- }
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
+ }
1985
1861
 
1986
- .tds-popover[data-entering],.tds-popover[data-exiting]{
1987
- will-change:opacity, transform;
1988
- }
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
+ }
1989
1865
 
1990
- @keyframes tds-popover{
1991
- from{
1992
- opacity:0;
1993
- transform:translateY(-8px);
1866
+ .tds-radio-group:has(input:required) legend::after{
1867
+ margin-left:.25ch;
1868
+ color:var(--t-text-color-status-error);
1869
+ content:"*";
1994
1870
  }
1995
- }
1996
- }
1997
1871
 
1998
- .tds-popover-content{
1872
+ .tds-radio-group-fields{
1999
1873
  display:flex;
2000
1874
  flex-direction:column;
2001
- padding:var(--t-spacing-1);
2002
- outline:0;
1875
+ gap:var(--tds-radio-group-gap);
1876
+ align-items:flex-start;
1877
+ margin-top:var(--t-spacing-1);
1878
+ }
1879
+
1880
+ .tds-radio-group-description{
1881
+ display:flex;
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;
2003
1903
  }
2004
1904
 
2005
1905
  .tds-radio{
@@ -2064,404 +1964,659 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2064
1964
  --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2065
1965
  }
2066
1966
 
2067
- :is(.tds-radio input[type="radio"]):focus-visible{
2068
- outline:var(--t-focus-ring-outline);
2069
- 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;
2092
+ }
2093
+
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);
2100
+ }
2101
+
2102
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2103
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2070
2104
  }
2071
2105
 
2072
- :is(.tds-radio input[type="radio"]):disabled{
2073
- pointer-events:none;
2106
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2107
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2074
2108
  }
2075
2109
 
2076
- @media (prefers-reduced-motion: reduce){
2110
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2111
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2112
+ }
2077
2113
 
2078
- .tds-radio input[type="radio"]{
2079
- --tds-radio-transition-property:none;
2080
- }
2114
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2115
+ background:var(--tds-input-scrollbar-surface-color);
2081
2116
  }
2082
2117
 
2083
- .tds-radio:has(input:checked){
2084
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2085
- --tds-radio-input-border-color:var(--t-border-color-control-info);
2086
- --tds-radio-input-border-width:4px;
2087
- }
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
+ }
2088
2123
 
2089
- .tds-radio:has(input:checked) input:hover:not(:disabled){
2090
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2091
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2124
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2125
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2126
+ cursor:default;
2092
2127
  }
2093
2128
 
2094
- .tds-radio:has(input:user-invalid){
2095
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2096
- }
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
+ }
2097
2134
 
2098
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2099
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2100
- --tds-radio-input-background-color:var(--t-form-background-color-error);
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
+ }
2101
2140
  }
2141
+ }
2102
2142
 
2103
- .tds-radio:has(input:disabled){
2104
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2105
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
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);
2106
2147
 
2107
- --tds-radio-label-color:var(--t-form-color-disabled);
2108
- --tds-radio-description-color:var(--t-form-color-disabled);
2109
- --tds-radio-cursor:not-allowed;
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;
2152
+ display:flex;
2153
+ flex-direction:column;
2154
+ gap:0;
2155
+ padding:0;
2156
+ margin:0;
2157
+
2158
+ font-size:var(--tds-checkbox-group-font-size);
2159
+ line-height:var(--tds-checkbox-group-line-height);
2160
+ border:0;
2161
+ }
2162
+
2163
+ .tds-checkbox-group legend{
2164
+ float:left;
2165
+ padding:0;
2166
+ margin:0;
2110
2167
  }
2111
2168
 
2112
- .tds-radio:has(input:disabled) input:checked{
2113
- --tds-radio-input-background-color:var(--t-form-background-color);
2114
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
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;
2172
+ }
2173
+
2174
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
2175
+ margin-left:.25ch;
2176
+ color:var(--t-text-color-status-error);
2177
+ content:"*";
2115
2178
  }
2116
2179
 
2117
- .tds-radio-description{
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{
2185
+ display:flex;
2186
+ flex-direction:column;
2187
+ gap:var(--tds-checkbox-group-gap);
2188
+ align-items:flex-start;
2189
+ margin-top:var(--t-spacing-1);
2190
+ }
2191
+
2192
+ .tds-checkbox-group-description{
2118
2193
  display:flex;
2119
- grid-area:2 / 2;
2120
2194
  gap:var(--t-spacing-half);
2121
2195
  align-items:flex-start;
2122
- padding-inline-start:var(--t-spacing-1);
2123
- margin:0;
2124
- font-size:var(--tds-radio-description-font-size);
2125
- line-height:var(--tds-radio-description-line-height);
2126
- color:var(--tds-radio-description-color);
2196
+ margin:var(--t-spacing-fourth) 0 0;
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);
2127
2200
  cursor:text;
2128
2201
  }
2129
2202
 
2130
- .tds-radio--sm{
2131
- --tds-radio-line-height:1.35;
2132
- --tds-radio-input-size:var(--t-element-size-sm);
2133
- --tds-radio-font-size:var(--t-font-size-sm);
2134
- --tds-radio-description-font-size:var(--t-font-size-xs);
2135
- --tds-radio-description-line-height:1.3;
2203
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
2204
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
2205
+ flex-shrink:0;
2206
+ margin-top:calc(.5lh - .5em);
2207
+ line-height:var(--tds-checkbox-group-description-line-height);
2208
+ }
2209
+
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;
2136
2215
  }
2137
2216
 
2138
- .tds-radio-group{
2139
- --tds-radio-group-font-size:var(--t-font-size-md);
2140
- --tds-radio-group-line-height:1.4;
2141
- --tds-radio-group-gap:var(--t-spacing-1);
2217
+ .tds-button-group{
2218
+ display:inline-flex;
2219
+ }
2220
+ .tds-button-group > .tds-btn{
2221
+ --tds-button-group-item-z-index:1;
2142
2222
 
2143
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2144
- --tds-radio-group-description-line-height:1.35;
2145
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2146
- --tds-radio-group-description-invalid-icon-display:none;
2147
- display:flex;
2148
- flex-direction:column;
2149
- gap:0;
2150
- padding:0;
2151
- margin:0;
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);
2229
+ }
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);
2237
+ }
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);
2240
+ }
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);
2243
+ }
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);
2257
+ }
2152
2258
 
2153
- font-size:var(--tds-radio-group-font-size);
2154
- line-height:var(--tds-radio-group-line-height);
2155
- border:0;
2156
- }
2157
2259
 
2158
- .tds-radio-group legend{
2159
- float:left;
2160
- padding:0;
2161
- margin:0;
2260
+ @media (prefers-reduced-motion: no-preference){
2261
+
2262
+ :root{
2263
+ interpolate-size:allow-keywords;
2264
+ }
2162
2265
  }
2163
2266
 
2164
- .tds-radio-group[aria-invalid="true"]{
2165
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2166
- --tds-radio-group-description-invalid-icon-display:inline-block;
2267
+ @layer tds-component{
2268
+ tds-sidenav,
2269
+ .tds-sidenav{
2270
+ --tds-sidenav-indent:12px;
2271
+ --tds-sidenav-item-depth:0;
2272
+
2273
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
2274
+
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);
2281
+
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);
2286
+
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;
2290
+
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);
2294
+
2295
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
2296
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
2167
2297
  }
2168
2298
 
2169
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2170
- --tds-radio-input-border-color:var(--t-form-border-color-error);
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;
2306
+ }
2171
2307
  }
2172
2308
 
2173
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2174
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2175
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2176
- }
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
+ }
2316
+ }
2177
2317
 
2178
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2179
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2180
- }
2318
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2319
+ display:flex;
2320
+ }
2181
2321
 
2182
- .tds-radio-group:has(input:required) legend::after{
2183
- margin-left:.25ch;
2184
- color:var(--t-text-color-status-error);
2185
- content:"*";
2186
- }
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
+ }
2187
2327
 
2188
- .tds-radio-group-fields{
2189
- display:flex;
2190
- flex-direction:column;
2191
- gap:var(--tds-radio-group-gap);
2192
- align-items:flex-start;
2193
- margin-top:var(--t-spacing-1);
2328
+ .tds-sidenav-section-list{
2329
+ width:100%;
2330
+ padding:0;
2331
+ margin:0;
2332
+ list-style:none;
2194
2333
  }
2195
2334
 
2196
- .tds-radio-group-description{
2335
+ .tds-sidenav-section-header{
2197
2336
  display:flex;
2198
- gap:var(--t-spacing-half);
2199
- align-items:flex-start;
2200
- margin:var(--t-spacing-fourth) 0 0;
2201
- font-size:var(--tds-radio-group-description-font-size);
2202
- line-height:var(--tds-radio-group-description-line-height);
2203
- color:var(--tds-radio-group-description-color);
2204
- cursor:text;
2337
+ align-items:baseline;
2338
+ justify-content:space-between;
2339
+ padding-top:var(--t-spacing-2);
2205
2340
  }
2206
2341
 
2207
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2208
- display:var(--tds-radio-group-description-invalid-icon-display);
2209
- flex-shrink:0;
2210
- margin-top:calc(.5lh - .5em);
2211
- line-height:var(--tds-radio-group-description-line-height);
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;
2212
2349
  }
2213
2350
 
2214
- .tds-radio-group--sm{
2215
- --tds-radio-group-line-height:1.35;
2216
- --tds-radio-group-font-size:var(--t-font-size-sm);
2217
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2218
- --tds-radio-group-description-line-height:1.3;
2219
- }
2351
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2352
+ padding-top:0;
2353
+ }
2220
2354
 
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");
2225
- }
2355
+ .tds-sidenav-section-header [slot="label-actions"]{
2356
+ display:flex;
2357
+ gap:var(--t-spacing-half);
2358
+ align-items:center;
2359
+ }
2226
2360
 
2227
- @supports (x: attr(x type(*))){
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;
2367
+ }
2228
2368
 
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
2499
 
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
-
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);
@@ -4183,997 +4338,1022 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4183
4338
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4184
4339
  }
4185
4340
 
4186
- .tds-data-table{
4187
- --tds-data-table-background-color:var(--t-surface-color-canvas);
4188
- --tds-data-table-border-color:var(--t-border-color);
4189
- --tds-data-table-column-background-color:var(--t-fill-color-neutral-080);
4190
- --tds-data-table-cell-padding-inline:var(--t-spacing-2);
4191
- --tds-data-table-cell-padding-block:var(--t-spacing-1-half);
4341
+ .tds-pane{
4342
+ --tds-pane-background-color:var(--t-surface-color-card);
4343
+ --tds-pane-border-radius:var(--t-border-radius-lg);
4344
+ --tds-pane-border-color:var(--t-border-color);
4345
+
4346
+ --tds-pane-header-padding-block:var(--t-spacing-1-half);
4347
+ --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
4348
+
4349
+ --tds-pane-title-color:var(--t-text-color-headline);
4350
+ --tds-pane-title-font-size:var(--t-font-size-lg);
4351
+ --tds-pane-title-font-weight:var(--t-font-weight-medium);
4352
+ --tds-pane-title-line-height:1.4;
4353
+
4354
+ --tds-pane-body-padding:var(--t-spacing-3);
4355
+
4356
+ --tds-pane-footer-padding-block:var(--t-spacing-2);
4357
+ --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
4358
+
4359
+ --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
4360
+ --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
4361
+
4362
+ background:var(--tds-pane-background-color);
4363
+ border-radius:var(--tds-pane-border-radius);
4364
+ border:var(--t-border-width) solid var(--tds-pane-border-color);
4365
+ display:flex;
4366
+ flex-direction:column;
4367
+ }
4368
+
4369
+ .tds-pane-header{
4370
+ border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
4371
+ padding-block:var(--tds-pane-header-padding-block);
4372
+ padding-inline:var(--tds-pane-header-padding-inline);
4373
+ }
4374
+
4375
+ .tds-pane-header > .tds-helper-shelf-trigger{
4376
+ margin-inline:calc(-1 * var(--t-spacing-1)) auto;
4377
+ }
4378
+
4379
+ .tds-pane-header > .tds-helper-shelf{
4380
+ flex-basis:100%;
4381
+ order:1;
4382
+ }
4383
+
4384
+ .tds-pane-header:has( > .tds-helper-shelf){
4385
+ row-gap:var(--tds-pane-header-padding-block);
4386
+ padding-block-end:0;
4387
+ }
4388
+
4389
+ .tds-pane-header > .tds-helper-shelf > .tds-helper-shelf-content{
4390
+ font-size:var(--t-font-size-md);
4391
+ margin-block-end:var(--tds-pane-header-padding-block);
4392
+ }
4393
+
4394
+ .tds-pane-title{
4395
+ color:var(--tds-pane-title-color);
4396
+ font-size:var(--tds-pane-title-font-size);
4397
+ font-weight:var(--tds-pane-title-font-weight);
4398
+ line-height:var(--tds-pane-title-line-height);
4399
+ margin:0;
4400
+ }
4401
+
4402
+ .tds-pane-body{
4403
+ padding:var(--tds-pane-body-padding);
4192
4404
  }
4193
- .tds-data-table-frame{
4405
+
4406
+ .tds-pane-footer{
4407
+ padding-block-end:var(--tds-pane-footer-padding-block);
4408
+ padding-inline:var(--tds-pane-footer-padding-inline);
4409
+ }
4410
+
4411
+ .tds-pane-divider{
4412
+ border:0;
4413
+ border-top:var(--t-border-width) solid var(--tds-pane-border-color);
4414
+ margin-block:var(--tds-pane-divider-margin-block);
4415
+ margin-inline:var(--tds-pane-divider-margin-inline);
4416
+ }
4417
+
4418
+ .tds-data-table-filters-shelf{
4419
+ height:auto;
4194
4420
  overflow:hidden;
4421
+ transition:height var(--t-duration-300) var(--t-ease-out);
4422
+ }
4195
4423
 
4196
- border:1px solid var(--tds-data-table-border-color);
4197
- border-radius:var(--t-border-radius);
4424
+ @media (prefers-reduced-motion: reduce){
4425
+
4426
+ .tds-data-table-filters-shelf{
4427
+ transition:none;
4198
4428
  }
4199
- .tds-data-table-frame-header{
4200
- display:flex;
4201
- gap:var(--t-spacing-1-half);
4202
- align-items:center;
4203
- padding-block:var(--tds-data-table-cell-padding-block);
4204
- padding-inline:var(--tds-data-table-cell-padding-inline);
4429
+ }
4430
+
4431
+ .tds-data-table-filters-shelf--collapsed{
4432
+ height:0;
4433
+ transition-timing-function:var(--t-ease-in);
4205
4434
  }
4206
- .tds-data-table-frame-header-controls{
4207
- display:flex;
4208
- gap:var(--t-spacing-1-half);
4209
- align-items:center;
4210
- margin-inline-start:auto;
4435
+
4436
+ @supports (interpolate-size: allow-keywords){
4437
+ .tds-data-table-filters-shelf{
4438
+ interpolate-size:allow-keywords;
4439
+ }
4211
4440
  }
4212
- .tds-data-table-frame-footer{
4441
+
4442
+ .tds-data-table-filters{
4213
4443
  padding-block:var(--tds-data-table-cell-padding-block);
4214
4444
  padding-inline:var(--tds-data-table-cell-padding-inline);
4215
4445
  border-top:1px solid var(--tds-data-table-border-color);
4216
4446
  }
4217
- .tds-data-table-select-all-banner{
4218
- display:flex;
4219
- flex-wrap:wrap;
4220
- gap:var(--t-spacing-1);
4221
- align-items:baseline;
4222
- justify-content:center;
4223
- padding-block:var(--tds-data-table-cell-padding-block);
4224
- padding-inline:var(--tds-data-table-cell-padding-inline);
4225
- font-size:var(--t-font-size-md);
4226
- background-color:var(--tds-data-table-column-background-color);
4227
- }
4228
- .tds-data-table-select-all-banner:not(:first-child){
4229
- border-top:1px solid var(--tds-data-table-border-color);
4230
- }
4231
4447
 
4232
- .tds-data-table-select-all-banner-message{
4233
- margin:0;
4234
- color:var(--t-text-color-secondary);
4448
+ .tds-data-table-filters-active{
4449
+ display:flex;
4450
+ flex-direction:column;
4451
+ gap:var(--tds-data-table-cell-padding-block) var(--tds-data-table-cell-padding-inline);
4235
4452
  }
4236
4453
 
4454
+ @media (min-width: 480px){
4237
4455
 
4238
- .tds-data-table-results-count{
4239
- margin:0;
4240
- font-size:var(--t-font-size-md);
4241
- line-height:1;
4242
- color:var(--t-text-color-secondary);
4243
- }
4244
- .tds-data-table-scroll-wrapper{
4245
- position:relative;
4246
- overflow:hidden;
4247
- background-color:var(--tds-data-table-column-background-color);
4456
+ .tds-data-table-filters-active{
4457
+ flex-direction:row;
4248
4458
  }
4249
- .tds-data-table-scroll-wrapper:not(:first-child){
4250
- border-top:1px solid var(--tds-data-table-border-color);
4251
4459
  }
4252
- .tds-data-table-scroll{
4253
- overflow-x:auto;
4254
- scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
4460
+
4461
+ .tds-data-table-filters-active-list{
4462
+ display:flex;
4463
+ flex-wrap:wrap;
4464
+ gap:var(--t-spacing-half);
4465
+ min-width:0;
4255
4466
  }
4256
- @supports (animation-timeline: scroll()){
4257
- .tds-data-table--sticky-header .tds-data-table-scroll-wrapper{
4258
- overflow:clip;
4259
- }
4260
4467
 
4261
- .tds-data-table--sticky-header .tds-data-table-scroll{
4262
- overflow-y:clip;
4263
- }
4468
+ .tds-data-table-filters-active-actions{
4469
+ flex-shrink:0;
4470
+ }
4264
4471
 
4265
- .tds-data-table--sticky-header .tds-data-table-header{
4266
- z-index:1;
4267
- animation-name:tds-data-table-sticky-header;
4268
- animation-duration:auto;
4269
- animation-timing-function:linear;
4270
- animation-fill-mode:both;
4271
- animation-timeline:--_sticky-header-scroll;
4272
- animation-range:var(--_sticky-header-scroll-start, 0) calc(var(--_sticky-header-scroll-start, 0) + var(--_sticky-header-scroll-max, 0));
4273
- }
4472
+ :root{
4274
4473
 
4275
- @keyframes tds-data-table-sticky-header{
4276
- from{ transform:translateY(0); }
4277
- to{ transform:translateY(var(--_sticky-header-scroll-max, 0)); }
4278
- }
4474
+ --_data-table-filter-border-info:hsl(204 96% 89%);
4475
+ --_data-table-filter-border-error:hsl(8 60% 85%);
4279
4476
  }
4280
- @supports (timeline-scope: --tds){
4281
- .tds-data-table-scroll-wrapper{
4282
- --tds-data-table-scroll-shadow-size:var(--t-spacing-1);
4283
4477
 
4284
- timeline-scope:--tds-data-table-scroll-timeline;
4285
- }
4286
- .tds-data-table-scroll-wrapper:has(.tds-data-table-column--actions)::after{
4287
- content:none;
4288
- }
4478
+ :root[data-color-mode="dark"]{
4479
+ --_data-table-filter-border-info:var(--t-border-color-status-info);
4480
+ --_data-table-filter-border-error:var(--t-border-color-status-error);
4481
+ }
4289
4482
 
4290
- .tds-data-table-scroll{
4291
- scroll-timeline:--tds-data-table-scroll-timeline inline;
4292
- }
4293
- .tds-data-table-scroll-wrapper::before,
4294
- .tds-data-table-scroll-wrapper::after,
4295
- .tds-data-table-column--actions::before,
4296
- .tds-data-table-cell--actions::before{
4297
- position:absolute;
4298
- inset-block:0;
4299
- z-index:1;
4300
- width:var(--tds-data-table-scroll-shadow-size);
4301
- pointer-events:none;
4302
- content:"";
4303
- opacity:0;
4304
- animation-name:tds-data-table-scroll-shadow;
4305
- animation-duration:auto;
4306
- animation-timeline:--tds-data-table-scroll-timeline;
4307
- animation-timing-function:linear;
4308
- animation-fill-mode:both;
4483
+ @media (prefers-color-scheme: dark){
4484
+ :root[data-color-mode="system"]{
4485
+ --_data-table-filter-border-info:var(--t-border-color-status-info);
4486
+ --_data-table-filter-border-error:var(--t-border-color-status-error);
4309
4487
  }
4488
+ }
4489
+ .tds-btn-group--data-table-filters-chip,
4490
+ .tds-data-table-filters-chip-segments{
4491
+ min-width:0;
4492
+ }
4310
4493
 
4311
- .tds-data-table-scroll-wrapper::before{
4312
- inset-inline-start:0;
4313
- background:linear-gradient(to right, var(--t-shadow-overflow-color), transparent);
4314
- animation-range:0 var(--tds-data-table-scroll-shadow-size);
4315
- }
4494
+ .tds-btn-group--data-table-filters-chip .tds-btn{
4495
+ --_chip-border-color:var(--_data-table-filter-border-info);
4496
+ --_chip-icon-color:var(--t-icon-color-status-info);
4316
4497
 
4317
- .tds-data-table-scroll-wrapper::after,
4318
- .tds-data-table-column--actions::before,
4319
- .tds-data-table-cell--actions::before{
4320
- background:linear-gradient(to left, var(--t-shadow-overflow-color), transparent);
4321
- animation-direction:reverse;
4322
- animation-range:calc(100% - var(--tds-data-table-scroll-shadow-size)) 100%;
4323
- }
4498
+ gap:0;
4499
+ color:var(--t-text-color-status-info);
4500
+ background-color:var(--t-fill-color-status-info-dim);
4501
+ border-color:var(--_chip-border-color);
4502
+ }
4324
4503
 
4325
- .tds-data-table-scroll-wrapper::after{
4326
- inset-inline-end:0;
4504
+ :is(.tds-btn-group--data-table-filters-chip .tds-btn) svg{
4505
+ color:var(--_chip-icon-color);
4506
+ transform:scale(.75);
4327
4507
  }
4328
4508
 
4329
- .tds-data-table-column--actions::before,
4330
- .tds-data-table-cell--actions::before{
4331
- inset-inline-start:calc(-1 * var(--tds-data-table-scroll-shadow-size));
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);
4332
4513
  }
4333
4514
 
4334
- @keyframes tds-data-table-scroll-shadow{
4335
- from{ opacity:0; }
4336
- to{ opacity:1; }
4337
- }
4338
- }
4339
- .tds-data-table-grid{
4340
- width:100%;
4341
- font-size:var(--t-font-size-md);
4342
- color:var(--t-text-color);
4343
- border-spacing:0;
4344
- border-collapse:separate;
4345
- background-color:var(--tds-data-table-background-color);
4346
- }
4347
- .tds-data-table-grid th,.tds-data-table-grid td{
4348
- white-space:nowrap;
4349
- }
4350
- .tds-data-table-column{
4351
- padding:var(--tds-data-table-cell-padding-block);
4352
- padding-inline:var(--tds-data-table-cell-padding-inline);
4353
- font-weight:var(--t-font-weight-medium);
4354
- color:var(--t-text-color-secondary);
4355
- cursor:default;
4356
- background-color:var(--tds-data-table-column-background-color);
4357
- border-top:0;
4358
- border-bottom:1px solid var(--tds-data-table-border-color);
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;
4359
4522
  }
4360
- .tds-data-table-column[data-allows-sorting="true"]{
4361
- --_sort-icon-color:var(--t-text-color-disabled);
4362
- --_sort-icon-opacity:.5;
4363
- --_sort-icon-rotate:0;
4364
- cursor:pointer;
4365
- }
4366
- .tds-data-table-column[data-allows-sorting="true"][data-hovered]{
4367
- --_sort-icon-opacity:1;
4368
- }
4369
- .tds-data-table-column[data-sort-direction]{
4370
- --_sort-icon-color:inherit;
4371
- --_sort-icon-opacity:1;
4372
- }
4373
- .tds-data-table-column[data-sort-direction="descending"]{
4374
- --_sort-icon-rotate:.5turn;
4523
+
4524
+ .tds-data-table-filters-chip-segment:first-child{
4525
+ padding-inline-start:0;
4375
4526
  }
4376
4527
 
4377
- .tds-data-table-column-icon{
4378
- margin-inline-start:var(--t-spacing-1);
4379
- }
4380
- .tds-data-table-column-icon--sort{
4381
- color:var(--_sort-icon-color);
4382
- opacity:var(--_sort-icon-opacity);
4383
- transform:translateY(1px) rotate(var(--_sort-icon-rotate));
4384
- transition-timing-function:var(--t-ease-in-out);
4385
- transition-duration:var(--t-duration-300);
4386
- transition-property:color, opacity, transform;
4387
- }
4528
+ .tds-data-table-filters-chip-segment:last-child{
4529
+ padding-inline-end:0;
4530
+ border-inline-end-color:transparent;
4531
+ }
4388
4532
 
4389
- .tds-data-table-column-label--hidden,
4390
- .tds-data-table-cell-label--hidden,
4391
- .tds-data-table-results-count-label--hidden,
4392
- .tds-data-table-filter-controls-label--hidden{
4393
- position:absolute;
4394
- width:1px;
4395
- height:1px;
4396
- overflow:hidden;
4397
- white-space:nowrap;
4398
- clip-path:inset(50%);
4533
+ @media (prefers-reduced-motion: reduce){
4534
+
4535
+ .tds-data-table-filters-chip-segment{
4536
+ transition:none;
4399
4537
  }
4400
- .tds-data-table-cell{
4401
- padding:var(--tds-data-table-cell-padding-block);
4402
- padding-inline:var(--tds-data-table-cell-padding-inline);
4403
- border-bottom:1px solid var(--tds-data-table-border-color);
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;
4404
4544
  }
4405
- .tds-data-table-row:last-of-type .tds-data-table-cell{
4406
- border-bottom-width:0;
4545
+ .tds-data-table-filters-chip-segment--value{
4546
+ display:flex;
4547
+ min-width:0;
4548
+ overflow:hidden;
4407
4549
  }
4408
- .tds-data-table-row--interactive{
4409
- --tds-data-table-row-background-hover:var(--t-fill-color-neutral-090);
4410
- cursor:default;
4411
- transition:background-color var(--t-duration-100) var(--t-ease-in-out);
4550
+ .tds-data-table-filters-chip-segment-count{
4551
+ visibility:hidden;
4552
+ flex-shrink:0;
4553
+ max-inline-size:0;
4554
+ overflow:hidden;
4412
4555
  }
4413
- .tds-data-table-row--interactive[data-hovered],.tds-data-table-row--interactive[data-hovered] .tds-data-table-cell--actions{
4414
- background-color:var(--tds-data-table-row-background-hover);
4556
+ @supports (animation-timeline: scroll()){
4557
+ .tds-data-table-filters-chip-segment--value{
4558
+ timeline-scope:--_filter-chip-value;
4415
4559
  }
4416
- .tds-data-table-row--interactive[data-focus-visible]{
4417
- outline:var(--t-focus-ring-outline);
4418
- outline-offset:calc(-1 * var(--t-focus-ring-width));
4560
+
4561
+ .tds-data-table-filters-chip-segment-text{
4562
+ scroll-timeline:--_filter-chip-value inline;
4419
4563
  }
4420
4564
 
4421
- .tds-data-table-empty{
4422
- padding:var(--tds-data-table-cell-padding-block);
4423
- padding-inline:var(--tds-data-table-cell-padding-inline);
4424
- text-align:center;
4425
- white-space:normal;
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
+ }
4577
+ }
4426
4578
  }
4427
4579
 
4428
- .tds-data-table-loading{
4429
- display:flex;
4430
- align-items:center;
4431
- justify-content:center;
4432
- padding:var(--tds-data-table-cell-padding-block);
4433
- padding-inline:var(--tds-data-table-cell-padding-inline);
4580
+ .tds-btn-group--data-table-filters-chip-inactive .tds-btn{
4581
+ --_chip-border-color:var(--t-border-color-button-neutral);
4582
+ --_chip-icon-color:var(--t-icon-color-status-neutral);
4583
+
4584
+ color:var(--t-text-color);
4585
+ background-color:var(--t-fill-color-status-neutral-dim);
4434
4586
  }
4435
4587
 
4436
- @keyframes tds-data-table-loading-fade-in{
4437
- from{
4438
- opacity:0;
4588
+ :is(.tds-btn-group--data-table-filters-chip-inactive .tds-btn):where(button):hover,:is(.tds-btn-group--data-table-filters-chip-inactive .tds-btn):where(button):active,:is(.tds-btn-group--data-table-filters-chip-inactive .tds-btn):where(button):focus{
4589
+ color:var(--t-text-color);
4590
+ background-color:var(--t-fill-color-status-neutral-ghost);
4439
4591
  }
4440
4592
 
4441
- to{
4442
- opacity:1;
4443
- }
4593
+ .tds-btn-group--data-table-filters-chip-invalid .tds-btn{
4594
+ --_chip-border-color:var(--_data-table-filter-border-error);
4595
+ --_chip-icon-color:var(--t-icon-color-status-error);
4596
+
4597
+ color:var(--t-text-color-status-error);
4598
+ background-color:var(--t-fill-color-status-error-dim);
4444
4599
  }
4445
- .tds-data-table-loading-spinner{
4446
- --tds-loading-spinner-size:48px;
4447
- --tds-loading-spinner-track-width:6px;
4448
- --tds-loading-spinner-visibility:visible;
4449
- --tds-loading-spinner-animation-play-state:running;
4450
4600
 
4451
- position:relative;
4452
- display:block;
4453
- width:var(--tds-loading-spinner-size);
4454
- height:var(--tds-loading-spinner-size);
4455
- margin-block:min(calc(var(--tds-loading-spinner-size) * 1.25), 25vh);
4456
- opacity:0;
4457
- animation-name:tds-data-table-loading-fade-in;
4458
- animation-duration:1s;
4459
- animation-timing-function:ease-in-out;
4460
- animation-fill-mode:forwards;
4601
+ :is(.tds-btn-group--data-table-filters-chip-invalid .tds-btn):where(button):hover,:is(.tds-btn-group--data-table-filters-chip-invalid .tds-btn):where(button):active,:is(.tds-btn-group--data-table-filters-chip-invalid .tds-btn):where(button):focus{
4602
+ color:var(--t-text-color-status-error);
4603
+ background-color:var(--t-fill-color-status-error-ghost);
4604
+ }
4605
+
4606
+ .tds-data-table-filters-chip-static{
4607
+ cursor:default;
4461
4608
  }
4462
- .tds-data-table-loading-spinner .tds-loading-spinner{
4463
- inset:0;
4609
+ .tds-popover--data-table-filters-popover .tds-popover-content{
4610
+ gap:var(--t-spacing-1);
4611
+ align-items:start;
4612
+ padding:var(--t-spacing-2);
4464
4613
  }
4465
- @media (prefers-reduced-motion: reduce){
4466
- .tds-data-table-loading-spinner{
4467
- --tds-loading-spinner-animation-play-state:paused;
4468
4614
 
4469
- opacity:1;
4470
- animation:none;
4615
+ @media (prefers-reduced-motion: no-preference){
4616
+ .tds-popover--data-table-filters-popover.tds-popover:is([data-entering],[data-exiting]){
4617
+ animation-name:tds-data-table-filters-popover;
4618
+ }
4619
+
4620
+ @keyframes tds-data-table-filters-popover{
4621
+ from{
4622
+ opacity:0;
4623
+ }
4471
4624
  }
4472
4625
  }
4473
- .tds-data-table-column,
4474
- .tds-data-table-cell{
4475
- text-align:start;
4626
+ .tds-data-table-filters-number-range .tds-number-stepper{
4627
+ flex:1 1 0;
4628
+ min-inline-size:0;
4476
4629
  }
4477
4630
 
4478
- .tds-data-table-column--align-center,
4479
- .tds-data-table-cell--align-center{
4480
- text-align:center;
4631
+ .tds-data-table-filters-popover-label{
4632
+ margin-block:0;
4633
+ font-size:var(--t-font-size-md);
4634
+ font-weight:var(--t-font-weight-medium);
4481
4635
  }
4482
4636
 
4483
- .tds-data-table-column--align-end,
4484
- .tds-data-table-cell--align-end{
4485
- text-align:end;
4637
+ .tds-data-table-filters-popover-label-operator{
4638
+ font-weight:var(--t-font-weight-normal);
4486
4639
  }
4487
4640
 
4488
- .tds-data-table-cell--numeric{
4489
- font-variant-numeric:tabular-nums;
4641
+ .tds-data-table-filters-popover-description{
4642
+ margin-block-start:calc(var(--t-spacing-fourth) * -1);
4643
+ margin-block-end:0;
4644
+ font-size:var(--t-font-size-sm);
4645
+ color:var(--t-text-color-secondary);
4490
4646
  }
4491
4647
 
4492
- .tds-data-table-column--selectable,
4493
- .tds-data-table-cell--selectable{
4494
- width:var(--t-element-size-md);
4495
- text-align:center;
4496
- }
4497
- .tds-data-table-column--actions,
4498
- .tds-data-table-cell--actions{
4499
- position:sticky;
4500
- inset-inline-end:0;
4501
- width:1%;
4502
- text-align:right;
4648
+ .tds-data-table-filter-controls-badge{
4649
+ min-inline-size:calc(1lh + (var(--t-border-width) * 2));
4650
+ padding-inline:var(--t-spacing-half);
4651
+ font-size:var(--t-font-size-sm);
4652
+ color:var(--t-text-color-status-info);
4653
+ background-color:var(--t-fill-color-status-info-dim);
4654
+ border:var(--t-border-width) solid var(--_data-table-filter-border-info);
4655
+ border-radius:var(--t-border-radius-round);
4503
4656
  }
4504
4657
 
4505
- .tds-data-table-cell--actions{
4506
- padding-inline:var(--tds-data-table-cell-padding-block);
4507
- background-color:var(--tds-data-table-background-color);
4658
+ .tds-data-table{
4659
+ --tds-data-table-background-color:var(--t-surface-color-canvas);
4660
+ --tds-data-table-border-color:var(--t-border-color);
4661
+ --tds-data-table-column-background-color:var(--t-fill-color-neutral-080);
4662
+ --tds-data-table-cell-padding-inline:var(--t-spacing-2);
4663
+ --tds-data-table-cell-padding-block:var(--t-spacing-1-half);
4508
4664
  }
4509
- .tds-data-table-selectable-checkbox{
4510
- --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color);
4511
- --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color);
4512
- --tds-data-table-selectable-checkbox-border-radius:var(--t-border-radius-sm);
4513
- --tds-data-table-selectable-checkbox-cursor:pointer;
4514
- --tds-data-table-selectable-checkbox-size:var(--t-element-size-md);
4515
- --tds-data-table-selectable-checkbox-transition-property:background-color, border-color;
4516
-
4517
- --tds-data-table-selectable-checkbox-icon:none;
4518
- --tds-data-table-selectable-checkbox-icon-visibility:hidden;
4519
- --tds-data-table-selectable-checkbox-icon-opacity:0;
4520
- --tds-data-table-selectable-checkbox-icon-fill:var(--t-icon-color-inverted);
4665
+ .tds-data-table-frame{
4666
+ overflow:hidden;
4521
4667
 
4522
- position:relative;
4523
- display:block;
4524
- width:var(--tds-data-table-selectable-checkbox-size);
4525
- height:var(--tds-data-table-selectable-checkbox-size);
4526
- margin:0;
4527
- cursor:var(--tds-data-table-selectable-checkbox-cursor);
4528
- background-color:var(--tds-data-table-selectable-checkbox-background-color);
4529
- border:var(--t-form-border-width) solid var(--tds-data-table-selectable-checkbox-border-color);
4530
- border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
4531
- transition-timing-function:var(--t-ease-in-out);
4532
- transition-duration:var(--t-duration-100);
4533
- transition-property:var(--tds-data-table-selectable-checkbox-transition-property);
4668
+ border:1px solid var(--tds-data-table-border-color);
4669
+ border-radius:var(--t-border-radius);
4534
4670
  }
4535
- .tds-data-table-selectable-checkbox::after{
4536
- position:absolute;
4537
- inset:calc(-1 * var(--tds-data-table-cell-padding-block)) calc(-1 * var(--tds-data-table-cell-padding-inline));
4538
- content:"";
4539
- }
4540
- .tds-data-table-selectable-checkbox::before{
4541
- position:absolute;
4542
- inset:0;
4543
- visibility:var(--tds-data-table-selectable-checkbox-icon-visibility);
4544
- content:"";
4545
- background-color:var(--tds-data-table-selectable-checkbox-icon-fill);
4546
- border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
4547
- opacity:var(--tds-data-table-selectable-checkbox-icon-opacity);
4548
- -webkit-mask-image:var(--tds-data-table-selectable-checkbox-icon);
4549
- mask-image:var(--tds-data-table-selectable-checkbox-icon);
4550
- -webkit-mask-repeat:no-repeat;
4551
- mask-repeat:no-repeat;
4552
- -webkit-mask-size:contain;
4553
- mask-size:contain;
4554
- }
4555
- .tds-data-table-selectable-checkbox[data-hovered],.tds-data-table-row--press-selects[data-hovered] .tds-data-table-selectable-checkbox:not([data-disabled]){
4556
- --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
4557
- --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-button-interaction-outline-hover);
4558
- }
4559
- .tds-data-table-selectable-checkbox[data-focus-visible]{
4560
- outline:var(--t-focus-ring-outline);
4561
- outline-offset:var(--t-focus-ring-offset);
4562
- }
4563
- .tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]{
4564
- --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-control);
4565
- --tds-data-table-selectable-checkbox-border-color:var(--t-border-color-control-info);
4566
- --tds-data-table-selectable-checkbox-icon-visibility:visible;
4567
- --tds-data-table-selectable-checkbox-icon-opacity:1;
4568
- }
4569
- [data-hovered]:is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]),.tds-data-table-row--press-selects[data-hovered] :is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]):not([data-disabled]){
4570
- --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
4571
- --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-interaction-hover);
4572
- }
4573
- .tds-data-table-selectable-checkbox[data-selected]{
4574
- --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
4575
- }
4576
- .tds-data-table-selectable-checkbox[data-indeterminate]{
4577
- --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
4578
- }
4579
- .tds-data-table-selectable-checkbox[data-disabled]{
4580
- --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color-disabled);
4581
- --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color-disabled);
4582
- --tds-data-table-selectable-checkbox-cursor:not-allowed;
4583
- }
4584
- .tds-data-table-selectable-checkbox[data-disabled][data-selected],.tds-data-table-selectable-checkbox[data-disabled][data-indeterminate]{
4585
- --tds-data-table-selectable-checkbox-background-color:var(--t-border-color-control-disabled);
4586
- }
4587
- @media (prefers-reduced-motion: reduce){
4588
- .tds-data-table-selectable-checkbox{
4589
- --tds-data-table-selectable-checkbox-transition-property:none;
4671
+ .tds-data-table-frame-header{
4672
+ container:tds-data-table-header / inline-size;
4590
4673
  }
4591
- }
4592
-
4593
- .tds-data-table-popover-trigger[aria-expanded="true"]{
4594
- color:var(--tds-btn-color-active);
4595
- cursor:pointer;
4596
- background-color:var(--tds-btn-bg-active);
4597
- border-color:var(--tds-btn-border-color-active);
4674
+ .tds-data-table-frame-header-content{
4675
+ display:flex;
4676
+ flex-direction:column;
4598
4677
  }
4599
4678
 
4600
- .tds-data-table-popover-trigger[aria-expanded="true"]:hover,.tds-data-table-popover-trigger[aria-expanded="true"]:focus-visible{
4601
- color:var(--tds-btn-color-active);
4602
- background-color:var(--tds-btn-bg-active);
4603
- border-color:var(--tds-btn-border-color-active);
4679
+ .tds-data-table-frame-header-results,
4680
+ .tds-data-table-frame-header-controls{
4681
+ display:flex;
4682
+ gap:var(--t-spacing-1-half);
4683
+ align-items:center;
4684
+ padding-block:var(--tds-data-table-cell-padding-block);
4685
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4686
+ }
4687
+ .tds-data-table-frame-header-results{
4688
+ flex:none;
4689
+ flex-wrap:wrap;
4690
+ }
4691
+ .tds-data-table-frame-header-controls{
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);
4604
4697
  }
4605
4698
 
4606
- .tds-data-table-popover{
4607
- inline-size:16rem;
4608
- max-block-size:inherit;
4699
+ .tds-data-table-search{
4700
+ flex:1 1 auto;
4701
+ min-inline-size:0;
4609
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
+ }
4610
4709
 
4611
- .tds-data-table-filter-controls-search-input-sticky{
4612
- position:sticky;
4613
- inset-block-start:0;
4614
- z-index:1;
4615
- padding:var(--t-spacing-1);
4616
- margin:calc(-1 * var(--t-spacing-1));
4617
- background-color:var(--t-form-background-color);
4618
- }
4710
+ .tds-data-table-frame-header-results{
4711
+ flex:0 1 auto;
4712
+ flex-wrap:nowrap;
4713
+ padding-inline-end:0;
4714
+ }
4619
4715
 
4620
- .tds-data-table-filter-controls-search-input-control{
4621
- --_search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
4622
- --_search-input-outline-offset:0;
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
+ }
4623
4723
 
4724
+ .tds-data-table-search{
4725
+ flex:0 1 15rem;
4726
+ min-inline-size:10rem;
4727
+ contain:inline-size;
4728
+ }
4729
+ }
4730
+ .tds-data-table-frame-footer{
4731
+ padding-block:var(--tds-data-table-cell-padding-block);
4732
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4733
+ border-top:1px solid var(--tds-data-table-border-color);
4734
+ }
4735
+ .tds-data-table-select-all-banner{
4624
4736
  display:flex;
4737
+ flex-wrap:wrap;
4625
4738
  gap:var(--t-spacing-1);
4626
- align-items:center;
4627
- min-block-size:var(--t-container-size-md);
4628
- padding-inline:var(--t-spacing-1);
4739
+ align-items:baseline;
4740
+ justify-content:center;
4741
+ padding-block:var(--tds-data-table-cell-padding-block);
4742
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4629
4743
  font-size:var(--t-font-size-md);
4630
- color:var(--t-form-color);
4631
- outline:var(--t-focus-ring-width) solid transparent;
4632
- outline-color:var(--_search-input-outline-color);
4633
- outline-offset:var(--_search-input-outline-offset);
4634
- background-color:var(--t-form-background-color);
4635
- border:var(--t-form-border-width) solid var(--t-form-border-color);
4636
- border-radius:var(--t-form-border-radius);
4637
- transition-timing-function:var(--t-ease-in-out);
4638
- transition-duration:var(--t-duration-200);
4639
- transition-property:background-color, border-color, outline-color, outline-offset;
4744
+ background-color:var(--tds-data-table-column-background-color);
4640
4745
  }
4641
-
4642
- .tds-data-table-filter-controls-search-input-control:hover:not(:has(input:focus)){
4643
- border-color:var(--t-form-border-color-hover);
4746
+ .tds-data-table-select-all-banner:not(:first-child){
4747
+ border-top:1px solid var(--tds-data-table-border-color);
4644
4748
  }
4645
4749
 
4646
- .tds-data-table-filter-controls-search-input-control:has(input:focus){
4647
- --_search-input-outline-color:var(--t-focus-ring-color);
4648
- --_search-input-outline-offset:var(--t-focus-ring-offset);
4649
-
4650
- border-color:var(--t-form-border-color-focus);
4651
- }
4750
+ .tds-data-table-select-all-banner-message{
4751
+ margin:0;
4752
+ color:var(--t-text-color-secondary);
4753
+ }
4652
4754
 
4653
- .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-icon{
4654
- flex-shrink:0;
4655
- inline-size:1em;
4656
- color:var(--t-icon-color-dim);
4657
- }
4658
4755
 
4659
- .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input{
4660
- flex:1;
4661
- min-inline-size:0;
4662
- padding:0;
4663
- overflow:hidden;
4664
- text-overflow:ellipsis;
4665
- font-family:inherit;
4666
- font-size:inherit;
4667
- color:inherit;
4668
- white-space:nowrap;
4669
- -webkit-appearance:none;
4670
- -moz-appearance:none;
4671
- appearance:none;
4672
- outline:0;
4673
- background-color:transparent;
4674
- border:0;
4756
+ .tds-data-table-results-count{
4757
+ margin:0;
4758
+ font-size:var(--t-font-size-md);
4759
+ line-height:1;
4760
+ color:var(--t-text-color-secondary);
4761
+ }
4762
+ .tds-data-table-scroll-wrapper{
4763
+ position:relative;
4764
+ overflow:hidden;
4765
+ background-color:var(--tds-data-table-column-background-color);
4766
+ }
4767
+ .tds-data-table-scroll-wrapper:not(:first-child){
4768
+ border-top:1px solid var(--tds-data-table-border-color);
4675
4769
  }
4676
-
4677
- :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-moz-placeholder{
4678
- color:var(--t-form-placeholder-color);
4770
+ .tds-data-table-scroll{
4771
+ overflow-x:auto;
4772
+ scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
4773
+ }
4774
+ @supports (animation-timeline: scroll()){
4775
+ .tds-data-table--sticky-header .tds-data-table-scroll-wrapper{
4776
+ overflow:clip;
4679
4777
  }
4680
4778
 
4681
- :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::placeholder{
4682
- color:var(--t-form-placeholder-color);
4779
+ .tds-data-table--sticky-header .tds-data-table-scroll{
4780
+ overflow-y:clip;
4683
4781
  }
4684
4782
 
4685
- :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-decoration,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-cancel-button,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-results-button,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-results-decoration{
4686
- -webkit-appearance:none;
4687
- appearance:none;
4783
+ .tds-data-table--sticky-header .tds-data-table-header{
4784
+ position:relative;
4785
+ z-index:1;
4786
+ animation-name:tds-data-table-sticky-header;
4787
+ animation-duration:auto;
4788
+ animation-timing-function:linear;
4789
+ animation-fill-mode:both;
4790
+ animation-timeline:--_sticky-header-scroll;
4791
+ animation-range:var(--_sticky-header-scroll-start, 0) calc(var(--_sticky-header-scroll-start, 0) + var(--_sticky-header-scroll-max, 0));
4688
4792
  }
4689
4793
 
4690
- .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-clear-icon{
4691
- inline-size:calc(var(--t-font-size-md) * .8);
4692
- block-size:calc(var(--t-font-size-md) * .8);
4794
+ @keyframes tds-data-table-sticky-header{
4795
+ from{ transform:translateY(0); }
4796
+ to{ transform:translateY(var(--_sticky-header-scroll-max, 0)); }
4693
4797
  }
4798
+ }
4799
+ @supports (timeline-scope: --tds){
4800
+ .tds-data-table-scroll-wrapper{
4801
+ --tds-data-table-scroll-shadow-size:var(--t-spacing-1);
4694
4802
 
4695
- .tds-data-table-filter-controls-search-input-control .tds-btn{
4696
- --tds-btn-color:var(--t-icon-color-dim);
4697
- --tds-btn-padding-truncated-x:0;
4698
- --_search-input-clear-button-visibility:hidden;
4699
-
4700
- visibility:var(--_search-input-clear-button-visibility);
4701
- flex-shrink:0;
4803
+ timeline-scope:--tds-data-table-scroll-timeline;
4702
4804
  }
4805
+ .tds-data-table-scroll-wrapper:has(.tds-data-table-column--actions)::after{
4806
+ content:none;
4807
+ }
4703
4808
 
4704
- @media (prefers-reduced-motion: reduce){
4705
-
4706
- .tds-data-table-filter-controls-search-input-control{
4707
- transition-property:none;
4708
- }
4809
+ .tds-data-table-scroll{
4810
+ scroll-timeline:--tds-data-table-scroll-timeline inline;
4811
+ }
4812
+ .tds-data-table-scroll-wrapper::before,
4813
+ .tds-data-table-scroll-wrapper::after,
4814
+ .tds-data-table-column--actions::before,
4815
+ .tds-data-table-cell--actions::before{
4816
+ position:absolute;
4817
+ inset-block:0;
4818
+ z-index:1;
4819
+ width:var(--tds-data-table-scroll-shadow-size);
4820
+ pointer-events:none;
4821
+ content:"";
4822
+ opacity:0;
4823
+ animation-name:tds-data-table-scroll-shadow;
4824
+ animation-duration:auto;
4825
+ animation-timeline:--tds-data-table-scroll-timeline;
4826
+ animation-timing-function:linear;
4827
+ animation-fill-mode:both;
4709
4828
  }
4710
4829
 
4711
- .tds-data-table-filter-controls-search-input-control--has-value:is(:hover, :has(input:focus)) .tds-btn{
4712
- --_search-input-clear-button-visibility:visible;
4713
- }
4830
+ .tds-data-table-scroll-wrapper::before{
4831
+ inset-inline-start:0;
4832
+ background:linear-gradient(to right, var(--t-shadow-overflow-color), transparent);
4833
+ animation-range:0 var(--tds-data-table-scroll-shadow-size);
4834
+ }
4714
4835
 
4715
- :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section-label{
4716
- position:sticky;
4717
- inset-block-start:var(--_label-sticky-block-start);
4718
- background-color:var(--t-surface-color-card);
4836
+ .tds-data-table-scroll-wrapper::after,
4837
+ .tds-data-table-column--actions::before,
4838
+ .tds-data-table-cell--actions::before{
4839
+ background:linear-gradient(to left, var(--t-shadow-overflow-color), transparent);
4840
+ animation-direction:reverse;
4841
+ animation-range:calc(100% - var(--tds-data-table-scroll-shadow-size)) 100%;
4719
4842
  }
4720
4843
 
4721
- :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section .tds-dropdown-item{
4722
- scroll-margin-block-start:var(--t-spacing-4);
4844
+ .tds-data-table-scroll-wrapper::after{
4845
+ inset-inline-end:0;
4723
4846
  }
4724
4847
 
4725
- .tds-data-table-filter-controls-list{
4726
- --_label-sticky-block-start:var(--t-spacing-6);
4848
+ .tds-data-table-column--actions::before,
4849
+ .tds-data-table-cell--actions::before{
4850
+ inset-inline-start:calc(-1 * var(--tds-data-table-scroll-shadow-size));
4851
+ }
4727
4852
 
4728
- margin-block-start:var(--t-spacing-1);
4853
+ @keyframes tds-data-table-scroll-shadow{
4854
+ from{ opacity:0; }
4855
+ to{ opacity:1; }
4856
+ }
4729
4857
  }
4730
-
4731
- .tds-data-table-filter-controls-list[data-empty] .tds-dropdown-item{
4732
- --tds-dropdown-item-color:var(--t-text-color-secondary);
4858
+ .tds-data-table-grid{
4859
+ width:100%;
4860
+ font-size:var(--t-font-size-md);
4861
+ color:var(--t-text-color);
4862
+ border-spacing:0;
4863
+ border-collapse:separate;
4864
+ background-color:var(--tds-data-table-background-color);
4865
+ }
4866
+ .tds-data-table-grid th,.tds-data-table-grid td{
4867
+ white-space:nowrap;
4868
+ }
4869
+ .tds-data-table-column{
4870
+ padding:var(--tds-data-table-cell-padding-block);
4871
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4872
+ font-weight:var(--t-font-weight-medium);
4873
+ color:var(--t-text-color-secondary);
4874
+ cursor:default;
4875
+ background-color:var(--tds-data-table-column-background-color);
4876
+ border-top:0;
4877
+ border-bottom:1px solid var(--tds-data-table-border-color);
4878
+ }
4879
+ .tds-data-table-column[data-allows-sorting="true"]{
4880
+ --_sort-icon-color:var(--t-text-color-disabled);
4881
+ --_sort-icon-opacity:.5;
4882
+ --_sort-icon-rotate:0;
4883
+ cursor:pointer;
4733
4884
  }
4734
-
4735
- .tds-data-table-filter-controls-list .tds-dropdown-item{
4736
- scroll-margin-block-start:var(--t-spacing-6);
4885
+ .tds-data-table-column[data-allows-sorting="true"][data-hovered]{
4886
+ --_sort-icon-opacity:1;
4887
+ }
4888
+ .tds-data-table-column[data-sort-direction]{
4889
+ --_sort-icon-color:inherit;
4890
+ --_sort-icon-opacity:1;
4891
+ }
4892
+ .tds-data-table-column[data-sort-direction="descending"]{
4893
+ --_sort-icon-rotate:.5turn;
4737
4894
  }
4738
4895
 
4739
- .tds-data-table-filter-controls-submenu-list{
4740
- --_label-sticky-block-start:0;
4896
+ .tds-data-table-column-icon{
4897
+ margin-inline-start:var(--t-spacing-1);
4898
+ }
4899
+ .tds-data-table-column-icon--sort{
4900
+ color:var(--_sort-icon-color);
4901
+ opacity:var(--_sort-icon-opacity);
4902
+ transform:translateY(1px) rotate(var(--_sort-icon-rotate));
4903
+ transition-timing-function:var(--t-ease-in-out);
4904
+ transition-duration:var(--t-duration-300);
4905
+ transition-property:color, opacity, transform;
4741
4906
  }
4742
4907
 
4743
- .tds-data-table-filter-controls-submenu-list .tds-dropdown-section-label::before{
4908
+ .tds-data-table-column-label--hidden,
4909
+ .tds-data-table-cell-label--hidden,
4910
+ .tds-data-table-results-count-label--hidden,
4911
+ .tds-data-table-filter-controls-label--hidden,
4912
+ .tds-data-table-loading-label--hidden{
4913
+ position:absolute;
4914
+ width:1px;
4915
+ height:1px;
4916
+ overflow:hidden;
4917
+ white-space:nowrap;
4918
+ clip-path:inset(50%);
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{
4744
4925
  position:absolute;
4745
- inset-block-start:calc(-1 * var(--t-spacing-1));
4746
- inset-inline-start:0;
4747
- inline-size:100%;
4748
- block-size:var(--t-spacing-1);
4749
- content:"";
4750
- background-color:var(--t-surface-color-card);
4926
+ width:1px;
4927
+ height:1px;
4928
+ overflow:hidden;
4929
+ clip-path:inset(50%);
4930
+ }
4751
4931
  }
4752
-
4753
- .tds-data-table-filter-controls-submenu-trigger[data-open]{
4754
- background:var(--t-fill-color-neutral-070);
4932
+ .tds-data-table-cell{
4933
+ padding:var(--tds-data-table-cell-padding-block);
4934
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4935
+ border-bottom:1px solid var(--tds-data-table-border-color);
4755
4936
  }
4756
-
4757
- .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover{
4758
- inline-size:16rem;
4937
+ .tds-data-table-row:last-of-type .tds-data-table-cell{
4938
+ border-bottom-width:0;
4759
4939
  }
4760
-
4761
- .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover .tds-data-table-filter-controls-submenu-list{
4762
- max-block-size:20rem;
4940
+ .tds-data-table-row--interactive{
4941
+ --tds-data-table-row-background-hover:var(--t-fill-color-neutral-090);
4942
+ cursor:default;
4943
+ transition:background-color var(--t-duration-100) var(--t-ease-in-out);
4763
4944
  }
4945
+ .tds-data-table-row--interactive[data-hovered],.tds-data-table-row--interactive[data-hovered] .tds-data-table-cell--actions{
4946
+ background-color:var(--tds-data-table-row-background-hover);
4947
+ }
4948
+ .tds-data-table-row--interactive[data-focus-visible]{
4949
+ outline:var(--t-focus-ring-outline);
4950
+ outline-offset:calc(-1 * var(--t-focus-ring-width));
4951
+ }
4764
4952
 
4765
- .tds-data-table-filter-controls-submenu-chevron{
4766
- --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color-dim);
4767
-
4768
- color:var(--tds-data-table-filter-controls-submenu-chevron-color);
4769
- transform:scale(.8);
4953
+ .tds-data-table-empty{
4954
+ padding:var(--tds-data-table-cell-padding-block);
4955
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4956
+ text-align:center;
4957
+ white-space:normal;
4770
4958
  }
4771
-
4772
- [data-open] .tds-data-table-filter-controls-submenu-chevron{
4773
- --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color);
4959
+ .tds-data-table-loading-overlay{
4960
+ position:absolute;
4961
+ inset:0;
4962
+ z-index:2;
4963
+ display:flex;
4964
+ justify-content:center;
4965
+ container:tds-data-table-loading-overlay / size;
4966
+ pointer-events:none;
4967
+ }
4968
+ .tds-data-table-loading-overlay .tds-data-table-loading-spinner{
4969
+ align-self:center;
4970
+ margin-block:0;
4774
4971
  }
4775
-
4776
- @media (prefers-reduced-motion: no-preference){
4777
-
4778
- .tds-data-table-filter-controls-submenu-chevron{
4779
- transition-timing-function:var(--t-ease-in-out);
4780
- transition-duration:var(--t-duration-200);
4781
- transition-property:color;
4972
+ @container tds-data-table-loading-overlay (height >= 8rem){
4973
+ .tds-data-table-loading-overlay .tds-data-table-loading-spinner{
4974
+ align-self:initial;
4975
+ margin-block-start:min(var(--t-spacing-5) + (var(--tds-loading-spinner-size) * 1.25), var(--t-spacing-5) + 50cqh - var(--tds-loading-spinner-size));
4976
+ }
4977
+ }
4978
+ .tds-data-table-body{
4979
+ transition-timing-function:var(--t-ease-in);
4980
+ transition-duration:var(--t-duration-200);
4981
+ transition-property:filter, opacity;
4982
+ }
4983
+ @media (prefers-reduced-motion: reduce){
4984
+ .tds-data-table-body{
4985
+ transition-property:none;
4782
4986
  }
4783
4987
  }
4784
- .tds-data-table-filter-controls-drill-back{
4785
- --tds-dropdown-item-column-gap:var(--t-spacing-half);
4786
4988
 
4787
- padding-inline-start:var(--t-spacing-half);
4989
+ .tds-data-table-scroll[aria-busy="true"] .tds-data-table-body{
4990
+ opacity:.5;
4991
+ filter:blur(4px);
4992
+ transition-delay:var(--t-duration-200);
4993
+ transition-timing-function:var(--t-ease-out);
4994
+ transition-duration:var(--t-duration-300);
4788
4995
  }
4789
4996
 
4790
- .tds-data-table-filters-shelf{
4791
- height:auto;
4792
- overflow:hidden;
4793
- transition:height var(--t-duration-300) var(--t-ease-out);
4997
+ .tds-data-table-loading{
4998
+ display:flex;
4999
+ align-items:center;
5000
+ justify-content:center;
5001
+ padding:var(--tds-data-table-cell-padding-block);
5002
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4794
5003
  }
4795
5004
 
4796
- @media (prefers-reduced-motion: reduce){
5005
+ @keyframes tds-data-table-loading-fade-in{
5006
+ from{
5007
+ opacity:0;
5008
+ }
4797
5009
 
4798
- .tds-data-table-filters-shelf{
4799
- transition:none;
4800
- }
5010
+ to{
5011
+ opacity:1;
4801
5012
  }
5013
+ }
5014
+ .tds-data-table-loading-spinner{
5015
+ --tds-loading-spinner-size:48px;
5016
+ --tds-loading-spinner-track-width:6px;
5017
+ --tds-loading-spinner-visibility:visible;
5018
+ --tds-loading-spinner-animation-play-state:running;
4802
5019
 
4803
- .tds-data-table-filters-shelf--collapsed{
4804
- height:0;
4805
- transition-timing-function:var(--t-ease-in);
5020
+ position:relative;
5021
+ display:block;
5022
+ width:var(--tds-loading-spinner-size);
5023
+ height:var(--tds-loading-spinner-size);
5024
+ margin-block:min(calc(var(--tds-loading-spinner-size) * 1.25), 25vh);
5025
+ opacity:0;
5026
+ animation-name:tds-data-table-loading-fade-in;
5027
+ animation-duration:1s;
5028
+ animation-timing-function:ease-in-out;
5029
+ animation-fill-mode:forwards;
4806
5030
  }
5031
+ .tds-data-table-loading-spinner .tds-loading-spinner{
5032
+ inset:0;
5033
+ }
5034
+ @media (prefers-reduced-motion: reduce){
5035
+ .tds-data-table-loading-spinner{
5036
+ --tds-loading-spinner-animation-play-state:paused;
4807
5037
 
4808
- @supports (interpolate-size: allow-keywords){
4809
- .tds-data-table-filters-shelf{
4810
- interpolate-size:allow-keywords;
5038
+ opacity:1;
5039
+ animation:none;
4811
5040
  }
4812
5041
  }
4813
-
4814
- .tds-data-table-filters{
4815
- padding-block:var(--tds-data-table-cell-padding-block);
4816
- padding-inline:var(--tds-data-table-cell-padding-inline);
4817
- border-top:1px solid var(--tds-data-table-border-color);
5042
+ .tds-data-table-column,
5043
+ .tds-data-table-cell{
5044
+ text-align:start;
4818
5045
  }
4819
5046
 
4820
- .tds-data-table-filters-active{
4821
- display:flex;
4822
- -moz-column-gap:var(--tds-data-table-cell-padding-inline);
4823
- column-gap:var(--tds-data-table-cell-padding-inline);
4824
- justify-content:space-between;
5047
+ .tds-data-table-column--align-center,
5048
+ .tds-data-table-cell--align-center{
5049
+ text-align:center;
4825
5050
  }
4826
5051
 
4827
- .tds-data-table-filters-active-list{
4828
- display:flex;
4829
- flex-wrap:wrap;
4830
- gap:var(--t-spacing-half);
5052
+ .tds-data-table-column--align-end,
5053
+ .tds-data-table-cell--align-end{
5054
+ text-align:end;
4831
5055
  }
4832
5056
 
4833
- .tds-data-table-filters-active-actions{
4834
- flex-shrink:0;
5057
+ .tds-data-table-cell--numeric{
5058
+ font-variant-numeric:tabular-nums;
4835
5059
  }
4836
5060
 
4837
- :root{
4838
-
4839
- --_data-table-filter-border-info:hsl(204 96% 89%);
4840
- --_data-table-filter-border-error:hsl(8 60% 85%);
5061
+ .tds-data-table-column--selectable,
5062
+ .tds-data-table-cell--selectable{
5063
+ width:var(--t-element-size-md);
5064
+ text-align:center;
4841
5065
  }
4842
-
4843
- :root[data-color-mode="dark"]{
4844
- --_data-table-filter-border-info:var(--t-border-color-status-info);
4845
- --_data-table-filter-border-error:var(--t-border-color-status-error);
5066
+ .tds-data-table-column--actions,
5067
+ .tds-data-table-cell--actions{
5068
+ position:sticky;
5069
+ inset-inline-end:0;
5070
+ width:1%;
5071
+ text-align:right;
4846
5072
  }
4847
5073
 
4848
- @media (prefers-color-scheme: dark){
4849
- :root[data-color-mode="system"]{
4850
- --_data-table-filter-border-info:var(--t-border-color-status-info);
4851
- --_data-table-filter-border-error:var(--t-border-color-status-error);
4852
- }
5074
+ .tds-data-table-cell--actions{
5075
+ padding-inline:var(--tds-data-table-cell-padding-block);
5076
+ background-color:var(--tds-data-table-background-color);
4853
5077
  }
5078
+ .tds-data-table-selectable-checkbox{
5079
+ --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color);
5080
+ --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color);
5081
+ --tds-data-table-selectable-checkbox-border-radius:var(--t-border-radius-sm);
5082
+ --tds-data-table-selectable-checkbox-cursor:pointer;
5083
+ --tds-data-table-selectable-checkbox-size:var(--t-element-size-md);
5084
+ --tds-data-table-selectable-checkbox-transition-property:background-color, border-color;
4854
5085
 
4855
- .tds-btn-group--data-table-filters-chip .tds-btn{
4856
- --_chip-border-color:var(--_data-table-filter-border-info);
4857
- --_chip-icon-color:var(--t-icon-color-status-info);
5086
+ --tds-data-table-selectable-checkbox-icon:none;
5087
+ --tds-data-table-selectable-checkbox-icon-visibility:hidden;
5088
+ --tds-data-table-selectable-checkbox-icon-opacity:0;
5089
+ --tds-data-table-selectable-checkbox-icon-fill:var(--t-icon-color-inverted);
4858
5090
 
4859
- gap:0;
4860
- color:var(--t-text-color-status-info);
4861
- background-color:var(--t-fill-color-status-info-dim);
4862
- border-color:var(--_chip-border-color);
5091
+ position:relative;
5092
+ display:block;
5093
+ width:var(--tds-data-table-selectable-checkbox-size);
5094
+ height:var(--tds-data-table-selectable-checkbox-size);
5095
+ margin:0;
5096
+ cursor:var(--tds-data-table-selectable-checkbox-cursor);
5097
+ background-color:var(--tds-data-table-selectable-checkbox-background-color);
5098
+ border:var(--t-form-border-width) solid var(--tds-data-table-selectable-checkbox-border-color);
5099
+ border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
5100
+ transition-timing-function:var(--t-ease-in-out);
5101
+ transition-duration:var(--t-duration-100);
5102
+ transition-property:var(--tds-data-table-selectable-checkbox-transition-property);
4863
5103
  }
4864
-
4865
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) svg{
4866
- color:var(--_chip-icon-color);
4867
- transform:scale(.75);
5104
+ .tds-data-table-selectable-checkbox::after{
5105
+ position:absolute;
5106
+ inset:calc(-1 * var(--tds-data-table-cell-padding-block)) calc(-1 * var(--tds-data-table-cell-padding-inline));
5107
+ content:"";
5108
+ }
5109
+ .tds-data-table-selectable-checkbox::before{
5110
+ position:absolute;
5111
+ inset:0;
5112
+ visibility:var(--tds-data-table-selectable-checkbox-icon-visibility);
5113
+ content:"";
5114
+ background-color:var(--tds-data-table-selectable-checkbox-icon-fill);
5115
+ border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
5116
+ opacity:var(--tds-data-table-selectable-checkbox-icon-opacity);
5117
+ -webkit-mask-image:var(--tds-data-table-selectable-checkbox-icon);
5118
+ mask-image:var(--tds-data-table-selectable-checkbox-icon);
5119
+ -webkit-mask-repeat:no-repeat;
5120
+ mask-repeat:no-repeat;
5121
+ -webkit-mask-size:contain;
5122
+ mask-size:contain;
4868
5123
  }
4869
-
4870
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) span{
4871
- padding-inline:var(--tds-btn-padding-x);
4872
- border-inline-end:var(--t-border-width) solid var(--_chip-border-color);
4873
- transition-timing-function:var(--t-ease-in-out);
4874
- transition-duration:var(--t-duration-200);
4875
- transition-property:border-color;
5124
+ .tds-data-table-selectable-checkbox[data-hovered],.tds-data-table-row--press-selects[data-hovered] .tds-data-table-selectable-checkbox:not([data-disabled]){
5125
+ --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
5126
+ --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-button-interaction-outline-hover);
4876
5127
  }
4877
-
4878
- @media (prefers-reduced-motion: reduce){
4879
-
4880
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) span{
4881
- transition:none;
5128
+ .tds-data-table-selectable-checkbox[data-focus-visible]{
5129
+ outline:var(--t-focus-ring-outline);
5130
+ outline-offset:var(--t-focus-ring-offset);
4882
5131
  }
4883
- }
4884
-
4885
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) span:first-child{
4886
- padding-inline-start:0;
5132
+ .tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]{
5133
+ --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-control);
5134
+ --tds-data-table-selectable-checkbox-border-color:var(--t-border-color-control-info);
5135
+ --tds-data-table-selectable-checkbox-icon-visibility:visible;
5136
+ --tds-data-table-selectable-checkbox-icon-opacity:1;
4887
5137
  }
4888
-
4889
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) span:last-child{
4890
- padding-inline-end:0;
4891
- border-inline-end-color:transparent;
5138
+ [data-hovered]:is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]),.tds-data-table-row--press-selects[data-hovered] :is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]):not([data-disabled]){
5139
+ --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
5140
+ --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-interaction-hover);
5141
+ }
5142
+ .tds-data-table-selectable-checkbox[data-selected]{
5143
+ --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
4892
5144
  }
4893
-
4894
- :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{
4895
- color:var(--t-text-color-interaction);
4896
- background-color:var(--t-fill-color-status-info-ghost);
4897
- border-color:var(--_chip-border-color);
5145
+ .tds-data-table-selectable-checkbox[data-indeterminate]{
5146
+ --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
4898
5147
  }
4899
-
4900
- .tds-btn-group--data-table-filters-chip-inactive .tds-btn{
4901
- --_chip-border-color:var(--t-border-color-button-neutral);
4902
- --_chip-icon-color:var(--t-icon-color-status-neutral);
4903
-
4904
- color:var(--t-text-color);
4905
- background-color:var(--t-fill-color-status-neutral-dim);
4906
- }
4907
-
4908
- :is(.tds-btn-group--data-table-filters-chip-inactive .tds-btn):where(button):hover,:is(.tds-btn-group--data-table-filters-chip-inactive .tds-btn):where(button):active,:is(.tds-btn-group--data-table-filters-chip-inactive .tds-btn):where(button):focus{
4909
- color:var(--t-text-color);
4910
- background-color:var(--t-fill-color-status-neutral-ghost);
5148
+ .tds-data-table-selectable-checkbox[data-disabled]{
5149
+ --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color-disabled);
5150
+ --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color-disabled);
5151
+ --tds-data-table-selectable-checkbox-cursor:not-allowed;
4911
5152
  }
4912
-
4913
- .tds-btn-group--data-table-filters-chip-invalid .tds-btn{
4914
- --_chip-border-color:var(--_data-table-filter-border-error);
4915
- --_chip-icon-color:var(--t-icon-color-status-error);
4916
-
4917
- color:var(--t-text-color-status-error);
4918
- background-color:var(--t-fill-color-status-error-dim);
5153
+ .tds-data-table-selectable-checkbox[data-disabled][data-selected],.tds-data-table-selectable-checkbox[data-disabled][data-indeterminate]{
5154
+ --tds-data-table-selectable-checkbox-background-color:var(--t-border-color-control-disabled);
5155
+ }
5156
+ @media (prefers-reduced-motion: reduce){
5157
+ .tds-data-table-selectable-checkbox{
5158
+ --tds-data-table-selectable-checkbox-transition-property:none;
4919
5159
  }
4920
-
4921
- :is(.tds-btn-group--data-table-filters-chip-invalid .tds-btn):where(button):hover,:is(.tds-btn-group--data-table-filters-chip-invalid .tds-btn):where(button):active,:is(.tds-btn-group--data-table-filters-chip-invalid .tds-btn):where(button):focus{
4922
- color:var(--t-text-color-status-error);
4923
- background-color:var(--t-fill-color-status-error-ghost);
4924
5160
  }
4925
5161
 
4926
- .tds-data-table-filters-chip-static{
4927
- cursor:default;
5162
+ .tds-data-table-popover-trigger[aria-expanded="true"]{
5163
+ color:var(--tds-btn-color-active);
5164
+ cursor:pointer;
5165
+ background-color:var(--tds-btn-bg-active);
5166
+ border-color:var(--tds-btn-border-color-active);
4928
5167
  }
4929
- .tds-popover--data-table-filters-popover .tds-popover-content{
4930
- gap:var(--t-spacing-1);
4931
- align-items:start;
4932
- padding:var(--t-spacing-2);
4933
- }
4934
-
4935
- @media (prefers-reduced-motion: no-preference){
4936
- .tds-popover--data-table-filters-popover.tds-popover:is([data-entering],[data-exiting]){
4937
- animation-name:tds-data-table-filters-popover;
4938
- }
4939
5168
 
4940
- @keyframes tds-data-table-filters-popover{
4941
- from{
4942
- opacity:0;
4943
- }
5169
+ .tds-data-table-popover-trigger[aria-expanded="true"]:hover,.tds-data-table-popover-trigger[aria-expanded="true"]:focus-visible{
5170
+ color:var(--tds-btn-color-active);
5171
+ background-color:var(--tds-btn-bg-active);
5172
+ border-color:var(--tds-btn-border-color-active);
4944
5173
  }
4945
- }
4946
- .tds-data-table-filters-number-range .tds-number-stepper{
4947
- flex:1 1 0;
4948
- min-inline-size:0;
4949
- }
4950
5174
 
4951
- .tds-data-table-filters-popover-label{
4952
- margin-block:0;
4953
- font-size:var(--t-font-size-md);
4954
- font-weight:var(--t-font-weight-medium);
5175
+ .tds-data-table-popover{
5176
+ inline-size:16rem;
5177
+ max-block-size:inherit;
4955
5178
  }
4956
5179
 
4957
- .tds-data-table-filters-popover-label-operator{
4958
- font-weight:var(--t-font-weight-normal);
5180
+ .tds-data-table-filter-controls-search-input-sticky{
5181
+ position:sticky;
5182
+ inset-block-start:0;
5183
+ z-index:1;
5184
+ padding:var(--t-spacing-1);
5185
+ margin:calc(-1 * var(--t-spacing-1));
5186
+ background-color:var(--t-form-background-color);
4959
5187
  }
4960
5188
 
4961
- .tds-data-table-filters-popover-description{
4962
- margin-block-start:calc(var(--t-spacing-fourth) * -1);
4963
- margin-block-end:0;
4964
- font-size:var(--t-font-size-sm);
4965
- color:var(--t-text-color-secondary);
4966
- }
5189
+ .tds-data-table-filter-controls-search-input-control{
5190
+ --_search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
5191
+ --_search-input-outline-offset:0;
4967
5192
 
4968
- .tds-data-table-filter-controls-badge{
4969
- min-inline-size:calc(1lh + (var(--t-border-width) * 2));
4970
- padding-inline:var(--t-spacing-half);
4971
- font-size:var(--t-font-size-sm);
4972
- color:var(--t-text-color-status-info);
4973
- background-color:var(--t-fill-color-status-info-dim);
4974
- border:var(--t-border-width) solid var(--_data-table-filter-border-info);
4975
- border-radius:var(--t-border-radius-round);
5193
+ display:flex;
5194
+ gap:var(--t-spacing-1);
5195
+ align-items:center;
5196
+ min-block-size:var(--t-container-size-md);
5197
+ padding-inline:var(--t-spacing-1);
5198
+ font-size:var(--t-font-size-md);
5199
+ color:var(--t-form-color);
5200
+ outline:var(--t-focus-ring-width) solid transparent;
5201
+ outline-color:var(--_search-input-outline-color);
5202
+ outline-offset:var(--_search-input-outline-offset);
5203
+ background-color:var(--t-form-background-color);
5204
+ border:var(--t-form-border-width) solid var(--t-form-border-color);
5205
+ border-radius:var(--t-form-border-radius);
5206
+ transition-timing-function:var(--t-ease-in-out);
5207
+ transition-duration:var(--t-duration-200);
5208
+ transition-property:background-color, border-color, outline-color, outline-offset;
4976
5209
  }
4977
5210
 
4978
- .tds-pane{
4979
- --tds-pane-background-color:var(--t-surface-color-card);
4980
- --tds-pane-border-radius:var(--t-border-radius-lg);
4981
- --tds-pane-border-color:var(--t-border-color);
4982
-
4983
- --tds-pane-header-padding-block:var(--t-spacing-1-half);
4984
- --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
5211
+ .tds-data-table-filter-controls-search-input-control:hover:not(:has(input:focus)){
5212
+ border-color:var(--t-form-border-color-hover);
5213
+ }
4985
5214
 
4986
- --tds-pane-title-color:var(--t-text-color-headline);
4987
- --tds-pane-title-font-size:var(--t-font-size-lg);
4988
- --tds-pane-title-font-weight:var(--t-font-weight-medium);
4989
- --tds-pane-title-line-height:1.4;
5215
+ .tds-data-table-filter-controls-search-input-control:has(input:focus){
5216
+ --_search-input-outline-color:var(--t-focus-ring-color);
5217
+ --_search-input-outline-offset:var(--t-focus-ring-offset);
4990
5218
 
4991
- --tds-pane-body-padding:var(--t-spacing-3);
5219
+ border-color:var(--t-form-border-color-focus);
5220
+ }
4992
5221
 
4993
- --tds-pane-footer-padding-block:var(--t-spacing-2);
4994
- --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
5222
+ .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-icon{
5223
+ flex-shrink:0;
5224
+ inline-size:1em;
5225
+ color:var(--t-icon-color-dim);
5226
+ }
4995
5227
 
4996
- --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
4997
- --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
5228
+ .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input{
5229
+ flex:1;
5230
+ min-inline-size:0;
5231
+ padding:0;
5232
+ overflow:hidden;
5233
+ text-overflow:ellipsis;
5234
+ font-family:inherit;
5235
+ font-size:inherit;
5236
+ color:inherit;
5237
+ white-space:nowrap;
5238
+ -webkit-appearance:none;
5239
+ -moz-appearance:none;
5240
+ appearance:none;
5241
+ outline:0;
5242
+ background-color:transparent;
5243
+ border:0;
5244
+ }
4998
5245
 
4999
- background:var(--tds-pane-background-color);
5000
- border-radius:var(--tds-pane-border-radius);
5001
- border:var(--t-border-width) solid var(--tds-pane-border-color);
5002
- display:flex;
5003
- flex-direction:column;
5004
- }
5246
+ :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-moz-placeholder{
5247
+ color:var(--t-form-placeholder-color);
5248
+ }
5005
5249
 
5006
- .tds-pane-header{
5007
- border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
5008
- padding-block:var(--tds-pane-header-padding-block);
5009
- padding-inline:var(--tds-pane-header-padding-inline);
5010
- }
5250
+ :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::placeholder{
5251
+ color:var(--t-form-placeholder-color);
5252
+ }
5011
5253
 
5012
- .tds-pane-header > .tds-helper-shelf-trigger{
5013
- margin-inline:calc(-1 * var(--t-spacing-1)) auto;
5014
- }
5254
+ :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-decoration,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-cancel-button,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-results-button,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-results-decoration{
5255
+ -webkit-appearance:none;
5256
+ appearance:none;
5257
+ }
5015
5258
 
5016
- .tds-pane-header > .tds-helper-shelf{
5017
- flex-basis:100%;
5018
- order:1;
5259
+ .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-clear-icon{
5260
+ inline-size:calc(var(--t-font-size-md) * .8);
5261
+ block-size:calc(var(--t-font-size-md) * .8);
5019
5262
  }
5020
5263
 
5021
- .tds-pane-header:has( > .tds-helper-shelf){
5022
- row-gap:var(--tds-pane-header-padding-block);
5023
- padding-block-end:0;
5024
- }
5264
+ .tds-data-table-filter-controls-search-input-control .tds-btn{
5265
+ --tds-btn-color:var(--t-icon-color-dim);
5266
+ --tds-btn-padding-truncated-x:0;
5267
+ --_search-input-clear-button-visibility:hidden;
5025
5268
 
5026
- .tds-pane-header > .tds-helper-shelf > .tds-helper-shelf-content{
5027
- font-size:var(--t-font-size-md);
5028
- margin-block-end:var(--tds-pane-header-padding-block);
5269
+ visibility:var(--_search-input-clear-button-visibility);
5270
+ flex-shrink:0;
5029
5271
  }
5030
5272
 
5031
- .tds-pane-title{
5032
- color:var(--tds-pane-title-color);
5033
- font-size:var(--tds-pane-title-font-size);
5034
- font-weight:var(--tds-pane-title-font-weight);
5035
- line-height:var(--tds-pane-title-line-height);
5036
- margin:0;
5037
- }
5038
-
5039
- .tds-pane-body{
5040
- padding:var(--tds-pane-body-padding);
5041
- }
5273
+ @media (prefers-reduced-motion: reduce){
5042
5274
 
5043
- .tds-pane-footer{
5044
- padding-block-end:var(--tds-pane-footer-padding-block);
5045
- padding-inline:var(--tds-pane-footer-padding-inline);
5275
+ .tds-data-table-filter-controls-search-input-control{
5276
+ transition-property:none;
5046
5277
  }
5278
+ }
5047
5279
 
5048
- .tds-pane-divider{
5049
- border:0;
5050
- border-top:var(--t-border-width) solid var(--tds-pane-border-color);
5051
- margin-block:var(--tds-pane-divider-margin-block);
5052
- margin-inline:var(--tds-pane-divider-margin-inline);
5280
+ .tds-data-table-filter-controls-search-input-control--has-value:is(:hover, :has(input:focus)) .tds-btn{
5281
+ --_search-input-clear-button-visibility:visible;
5053
5282
  }
5054
5283
 
5055
- .tds-segmented-control{
5056
- --tds-segmented-control-font-size:var(--t-font-size-md);
5057
- --tds-segmented-control-padding:var(--t-spacing-half);
5058
- --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
5059
- --tds-segmented-control-icon-size:.66666667lh;
5060
- --tds-segmented-control-border-radius:var(--t-border-radius-md);
5061
- --tds-segmented-control-max-width:280px;
5062
- --tds-segmented-control-min-height:var(--t-container-size-md);
5063
- --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
5064
- --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
5065
- --tds-segmented-control-width:fit-content;
5284
+ :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section-label{
5285
+ position:sticky;
5286
+ inset-block-start:var(--_label-sticky-block-start);
5287
+ background-color:var(--t-surface-color-card);
5288
+ }
5066
5289
 
5067
- display:flex;
5068
- flex-direction:column;
5069
- gap:var(--t-spacing-half);
5070
- align-items:flex-start;
5071
- width:var(--tds-segmented-control-width);
5072
- }
5290
+ :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section .tds-dropdown-item{
5291
+ scroll-margin-block-start:var(--t-spacing-4);
5292
+ }
5073
5293
 
5074
- .tds-segmented-control--sm{
5075
- --tds-segmented-control-font-size:var(--t-font-size-sm);
5076
- --tds-segmented-control-padding-inline:7px;
5077
- --tds-segmented-control-min-height:var(--t-container-size-sm);
5078
- }
5294
+ .tds-data-table-filter-controls-list{
5295
+ --_label-sticky-block-start:var(--t-spacing-6);
5079
5296
 
5080
- .tds-segmented-control--full-width{
5081
- --tds-segmented-control-width:100%;
5082
- --tds-segmented-control-max-width:none;
5297
+ margin-block-start:var(--t-spacing-1);
5083
5298
  }
5084
5299
 
5085
- .tds-segmented-control--full-width .tds-segmented-control-segment{
5086
- flex:1 1 0;
5300
+ .tds-data-table-filter-controls-list[data-empty] .tds-dropdown-item{
5301
+ --tds-dropdown-item-color:var(--t-text-color-secondary);
5087
5302
  }
5088
5303
 
5089
- .tds-segmented-control-label{
5090
- font-size:var(--tds-segmented-control-font-size);
5091
- font-weight:var(--t-font-weight-normal);
5092
- color:var(--t-text-color-headline);
5093
- }
5094
-
5095
- .tds-segmented-control-label--hidden{
5096
- position:absolute;
5097
- width:1px;
5098
- height:1px;
5099
- overflow:hidden;
5100
- white-space:nowrap;
5101
- clip-path:inset(50%);
5102
- }
5304
+ .tds-data-table-filter-controls-list .tds-dropdown-item{
5305
+ scroll-margin-block-start:var(--t-spacing-6);
5306
+ }
5103
5307
 
5104
- .tds-segmented-control-track{
5105
- display:inline-flex;
5106
- gap:var(--tds-segmented-control-track-gap);
5107
- width:var(--tds-segmented-control-width);
5108
- padding:var(--tds-segmented-control-padding);
5109
- background-color:var(--t-form-background-color);
5110
- border:1px solid var(--t-border-color);
5111
- border-radius:var(--tds-segmented-control-border-radius);
5308
+ .tds-data-table-filter-controls-submenu-list{
5309
+ --_label-sticky-block-start:0;
5112
5310
  }
5113
5311
 
5114
- .tds-segmented-control-segment{
5115
- --tds-segmented-control-color:var(--t-text-color-status-neutral);
5116
- --tds-segmented-control-background-color:transparent;
5312
+ .tds-data-table-filter-controls-submenu-list .tds-dropdown-section-label::before{
5313
+ position:absolute;
5314
+ inset-block-start:calc(-1 * var(--t-spacing-1));
5315
+ inset-inline-start:0;
5316
+ inline-size:100%;
5317
+ block-size:var(--t-spacing-1);
5318
+ content:"";
5319
+ background-color:var(--t-surface-color-card);
5320
+ }
5117
5321
 
5118
- display:inline-flex;
5119
- gap:var(--t-spacing-1);
5120
- align-items:center;
5121
- justify-content:center;
5122
- max-width:var(--tds-segmented-control-max-width);
5123
- min-height:var(--tds-segmented-control-min-height);
5124
- padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
5125
- padding-inline:var(--tds-segmented-control-padding-inline);
5126
- font:inherit;
5127
- font-size:var(--tds-segmented-control-font-size);
5128
- color:var(--tds-segmented-control-color);
5129
- text-align:center;
5130
- cursor:pointer;
5131
- -webkit-user-select:none;
5132
- -moz-user-select:none;
5133
- user-select:none;
5134
- background-color:var(--tds-segmented-control-background-color);
5135
- border:0;
5136
- border-radius:var(--t-border-radius-sm);
5137
- transition-timing-function:var(--t-ease-in-out);
5138
- transition-duration:var(--t-duration-200);
5139
- transition-property:color, background-color;
5322
+ .tds-data-table-filter-controls-submenu-trigger[data-open]{
5323
+ background:var(--t-fill-color-neutral-070);
5140
5324
  }
5141
5325
 
5142
- .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
5143
- padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
5144
- }
5326
+ .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover{
5327
+ inline-size:16rem;
5328
+ }
5145
5329
 
5146
- .tds-segmented-control-segment .symbol{
5147
- display:block;
5148
- flex-shrink:0;
5149
- width:var(--tds-segmented-control-icon-size);
5150
- height:var(--tds-segmented-control-icon-size);
5151
- }
5330
+ .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover .tds-data-table-filter-controls-submenu-list{
5331
+ max-block-size:20rem;
5332
+ }
5152
5333
 
5153
- .tds-segmented-control-segment:focus-visible{
5154
- outline:var(--t-focus-ring-outline);
5155
- outline-offset:var(--t-focus-ring-offset);
5156
- }
5334
+ .tds-data-table-filter-controls-submenu-chevron{
5335
+ --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color-dim);
5157
5336
 
5158
- .tds-segmented-control-segment[aria-checked="true"]{
5159
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
5160
- --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
5337
+ color:var(--tds-data-table-filter-controls-submenu-chevron-color);
5338
+ transform:scale(.8);
5339
+ }
5161
5340
 
5162
- cursor:default;
5341
+ [data-open] .tds-data-table-filter-controls-submenu-chevron{
5342
+ --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color);
5163
5343
  }
5164
5344
 
5165
- .tds-segmented-control-segment:disabled{
5166
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
5167
- --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
5345
+ @media (prefers-reduced-motion: no-preference){
5168
5346
 
5169
- pointer-events:none;
5347
+ .tds-data-table-filter-controls-submenu-chevron{
5348
+ transition-timing-function:var(--t-ease-in-out);
5349
+ transition-duration:var(--t-duration-200);
5350
+ transition-property:color;
5351
+ }
5170
5352
  }
5353
+ .tds-data-table-filter-controls-drill-back{
5354
+ --tds-dropdown-item-column-gap:var(--t-spacing-half);
5171
5355
 
5172
- .tds-segmented-control-segment--interaction-subtle{
5173
- --tds-segmented-control-color-checked:var(--t-text-color-interaction);
5174
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
5175
- --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
5176
- --tds-segmented-control-background-color-disabled:transparent;
5356
+ padding-inline-start:var(--t-spacing-half);
5177
5357
  }
5178
5358
 
5179
5359
  .has-instance-badge-NNA9P{
@@ -5346,52 +5526,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5346
5526
  }
5347
5527
  }
5348
5528
 
5349
- .tds-helper-shelf{
5350
- --tds-helper-shelf-background-color:var(--t-fill-color-neutral-090);
5351
- --tds-helper-shelf-border-radius:var(--t-border-radius-md);
5352
- --tds-helper-shelf-color:var(--t-text-color);
5353
- --tds-helper-shelf-font-size:var(--t-font-size-sm);
5354
- --tds-helper-shelf-padding:var(--t-spacing-1);
5355
-
5356
- height:0;
5357
- overflow:hidden;
5358
- transition:height var(--t-duration-300) var(--t-ease-in);
5359
- }
5360
-
5361
- @media (prefers-reduced-motion: reduce){
5362
-
5363
- .tds-helper-shelf{
5364
- transition:none;
5365
- }
5366
- }
5367
-
5368
- .tds-helper-shelf--expanded{
5369
- height:auto;
5370
- transition-timing-function:var(--t-ease-out);
5371
- }
5372
-
5373
- @supports (interpolate-size: allow-keywords){
5374
- .tds-helper-shelf{
5375
- interpolate-size:allow-keywords;
5376
- }
5377
- }
5378
-
5379
- .tds-helper-shelf-content{
5380
- padding:var(--tds-helper-shelf-padding);
5381
- font-size:var(--tds-helper-shelf-font-size);
5382
- color:var(--tds-helper-shelf-color);
5383
- background:var(--tds-helper-shelf-background-color);
5384
- border-radius:var(--tds-helper-shelf-border-radius);
5385
- }
5386
-
5387
- .tds-helper-shelf-trigger{
5388
- --tds-helper-shelf-trigger-color-expanded:var(--t-text-color-interaction);
5389
- }
5390
-
5391
- .tds-helper-shelf-trigger[aria-expanded="true"]{
5392
- --tds-btn-color:var(--tds-helper-shelf-trigger-color-expanded);
5393
- }
5394
-
5395
5529
  .tds-filterable-list-box:has(input:disabled){
5396
5530
  --tds-filterable-list-box-cursor:not-allowed;
5397
5531
  }
@@ -5604,6 +5738,52 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5604
5738
  white-space:nowrap;
5605
5739
  }
5606
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
+
5607
5787
  .symbol{
5608
5788
  display:inline-block;
5609
5789
  vertical-align:text-top;