@planningcenter/tapestry 4.0.0-rc.2 → 4.0.0-rc.21

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 (53) hide show
  1. package/dist/componentRegistration.js +4 -0
  2. package/dist/componentRegistration.js.map +1 -1
  3. package/dist/components/DataTable/DataTable.d.ts +42 -2
  4. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  5. package/dist/components/DataTable/DataTable.js +109 -31
  6. package/dist/components/DataTable/DataTable.js.map +1 -1
  7. package/dist/components/DataTable/ResultsCount.d.ts +49 -0
  8. package/dist/components/DataTable/ResultsCount.d.ts.map +1 -0
  9. package/dist/components/DataTable/ResultsCount.js +76 -0
  10. package/dist/components/DataTable/ResultsCount.js.map +1 -0
  11. package/dist/components/DataTable/TableActions.d.ts +41 -0
  12. package/dist/components/DataTable/TableActions.d.ts.map +1 -0
  13. package/dist/components/DataTable/TableActions.js +47 -0
  14. package/dist/components/DataTable/TableActions.js.map +1 -0
  15. package/dist/components/button/BaseButton.d.ts.map +1 -1
  16. package/dist/components/button/BaseButton.js +20 -4
  17. package/dist/components/button/BaseButton.js.map +1 -1
  18. package/dist/components/combo-box/ComboBox.js +19 -19
  19. package/dist/components/combo-box/ComboBox.js.map +1 -1
  20. package/dist/components/internal/LoadingSpinner.js +2 -2
  21. package/dist/components/internal/LoadingSpinner.js.map +1 -1
  22. package/dist/components/internal/index.d.ts +2 -0
  23. package/dist/components/internal/index.d.ts.map +1 -1
  24. package/dist/components/internal/tooltip/Tooltip.d.ts +34 -0
  25. package/dist/components/internal/tooltip/Tooltip.d.ts.map +1 -0
  26. package/dist/components/internal/tooltip/TooltipTriggerContext.d.ts +7 -0
  27. package/dist/components/internal/tooltip/TooltipTriggerContext.d.ts.map +1 -0
  28. package/dist/components/internal/tooltip/TooltipTriggerContext.js +7 -0
  29. package/dist/components/internal/tooltip/TooltipTriggerContext.js.map +1 -0
  30. package/dist/components/internal/tooltip/index.d.ts +3 -0
  31. package/dist/components/internal/tooltip/index.d.ts.map +1 -0
  32. package/dist/components/link/IconLink.d.ts +1 -1
  33. package/dist/components/search-input/SearchInput.d.ts +40 -0
  34. package/dist/components/search-input/SearchInput.d.ts.map +1 -0
  35. package/dist/components/search-input/SearchInput.js +75 -0
  36. package/dist/components/search-input/SearchInput.js.map +1 -0
  37. package/dist/components/search-input/index.d.ts +4 -0
  38. package/dist/components/search-input/index.d.ts.map +1 -0
  39. package/dist/index.css +164 -275
  40. package/dist/index.css.map +1 -1
  41. package/dist/index.d.ts +1 -0
  42. package/dist/index.d.ts.map +1 -1
  43. package/dist/index.js +1 -0
  44. package/dist/index.js.map +1 -1
  45. package/dist/reactRender.css +1491 -1516
  46. package/dist/reactRender.css.map +1 -1
  47. package/dist/reactRenderLegacy.css +1491 -1516
  48. package/dist/reactRenderLegacy.css.map +1 -1
  49. package/dist/unstable.css +2803 -2828
  50. package/dist/unstable.css.map +1 -1
  51. package/dist/unstable.js +1 -0
  52. package/dist/unstable.js.map +1 -1
  53. package/package.json +5 -3
package/dist/index.css CHANGED
@@ -905,206 +905,121 @@
905
905
  .tds-flex{ display:flex; }
906
906
 
907
907
  [data-flex-inline]{ display:inline-flex; }
908
-
909
908
  [data-flex-expand]{
910
909
  flex:1 1 0%;
911
910
  min-width:0;
912
911
  }
913
912
 
914
913
  [data-flex-direction="row"]{ flex-direction:row; }
915
-
916
914
  [data-flex-direction="row-reverse"]{ flex-direction:row-reverse; }
917
-
918
915
  [data-flex-direction="column"]{ flex-direction:column; }
919
-
920
916
  [data-flex-direction="column-reverse"]{ flex-direction:column-reverse; }
921
917
 
922
918
  [data-flex-align="stretch"]{ align-items:stretch; }
923
-
924
919
  [data-flex-align="start"]{ align-items:start; }
925
-
926
920
  [data-flex-align="center"]{ align-items:center; }
927
-
928
921
  [data-flex-align="end"]{ align-items:end; }
929
-
930
922
  [data-flex-align="baseline"]{ align-items:baseline; }
931
923
 
932
924
  [data-flex-align-self="auto"]{ align-self:auto; }
933
-
934
925
  [data-flex-align-self="stretch"]{ align-self:stretch; }
935
-
936
926
  [data-flex-align-self="start"]{ align-self:start; }
937
-
938
927
  [data-flex-align-self="center"]{ align-self:center; }
939
-
940
928
  [data-flex-align-self="end"]{ align-self:end; }
941
-
942
929
  [data-flex-align-self="baseline"]{ align-self:baseline; }
943
930
 
944
931
  [data-flex-justify="start"]{ justify-content:start; }
945
-
946
932
  [data-flex-justify="center"]{ justify-content:center; }
947
-
948
933
  [data-flex-justify="end"]{ justify-content:end; }
949
-
950
934
  [data-flex-justify="space-between"]{ justify-content:space-between; }
951
-
952
935
  [data-flex-justify="space-around"]{ justify-content:space-around; }
953
-
954
936
  [data-flex-justify="space-evenly"]{ justify-content:space-evenly; }
955
937
 
956
938
  [data-flex-wrap="nowrap"]{ flex-wrap:nowrap; }
957
-
958
939
  [data-flex-wrap="wrap"]{ flex-wrap:wrap; }
959
-
960
940
  [data-flex-wrap="wrap-reverse"]{ flex-wrap:wrap-reverse; }
961
941
 
962
942
  [data-flex-grow="0"]{ flex-grow:0; }
963
-
964
943
  [data-flex-grow="1"]{ flex-grow:1; }
965
944
 
966
945
  [data-flex-shrink="0"]{ flex-shrink:0; }
967
-
968
946
  [data-flex-shrink="1"]{ flex-shrink:1; }
969
947
 
970
948
  [data-flex-gap="0"]{ gap:0; }
971
-
972
949
  [data-flex-gap="0.25"]{ gap:var(--t-spacing-fourth); }
973
-
974
950
  [data-flex-gap="0.5"]{ gap:var(--t-spacing-half); }
975
-
976
951
  [data-flex-gap="1"]{ gap:var(--t-spacing-1); }
977
-
978
952
  [data-flex-gap="1.5"]{ gap:var(--t-spacing-1-half); }
979
-
980
953
  [data-flex-gap="2"]{ gap:var(--t-spacing-2); }
981
-
982
954
  [data-flex-gap="3"]{ gap:var(--t-spacing-3); }
983
-
984
955
  [data-flex-gap="4"]{ gap:var(--t-spacing-4); }
985
-
986
956
  [data-flex-gap="5"]{ gap:var(--t-spacing-5); }
987
-
988
957
  [data-flex-gap="6"]{ gap:var(--t-spacing-6); }
989
-
990
958
  [data-flex-gap="7"]{ gap:var(--t-spacing-7); }
991
959
 
992
960
  [data-flex-row-gap="0"]{ row-gap:0; }
993
-
994
961
  [data-flex-row-gap="0.25"]{ row-gap:var(--t-spacing-fourth); }
995
-
996
962
  [data-flex-row-gap="0.5"]{ row-gap:var(--t-spacing-half); }
997
-
998
963
  [data-flex-row-gap="1"]{ row-gap:var(--t-spacing-1); }
999
-
1000
964
  [data-flex-row-gap="1.5"]{ row-gap:var(--t-spacing-1-half); }
1001
-
1002
965
  [data-flex-row-gap="2"]{ row-gap:var(--t-spacing-2); }
1003
-
1004
966
  [data-flex-row-gap="3"]{ row-gap:var(--t-spacing-3); }
1005
-
1006
967
  [data-flex-row-gap="4"]{ row-gap:var(--t-spacing-4); }
1007
-
1008
968
  [data-flex-row-gap="5"]{ row-gap:var(--t-spacing-5); }
1009
-
1010
969
  [data-flex-row-gap="6"]{ row-gap:var(--t-spacing-6); }
1011
-
1012
970
  [data-flex-row-gap="7"]{ row-gap:var(--t-spacing-7); }
1013
971
 
1014
972
  [data-flex-column-gap="0"]{ -moz-column-gap:0; column-gap:0; }
1015
-
1016
973
  [data-flex-column-gap="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
1017
-
1018
974
  [data-flex-column-gap="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
1019
-
1020
975
  [data-flex-column-gap="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
1021
-
1022
976
  [data-flex-column-gap="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
1023
-
1024
977
  [data-flex-column-gap="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
1025
-
1026
978
  [data-flex-column-gap="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
1027
-
1028
979
  [data-flex-column-gap="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
1029
-
1030
980
  [data-flex-column-gap="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
1031
-
1032
981
  [data-flex-column-gap="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
1033
-
1034
982
  [data-flex-column-gap="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
1035
983
 
1036
984
  [data-flex-basis="auto"]{ flex-basis:auto; }
1037
-
1038
985
  [data-flex-basis="0"]{ flex-basis:0; }
1039
-
1040
986
  [data-flex-basis="100%"]{ flex-basis:100%; }
1041
987
 
1042
988
  [data-padding="0"]{ padding:0; }
1043
-
1044
989
  [data-padding="0.25"]{ padding:var(--t-spacing-fourth); }
1045
-
1046
990
  [data-padding="0.5"]{ padding:var(--t-spacing-half); }
1047
-
1048
991
  [data-padding="1"]{ padding:var(--t-spacing-1); }
1049
-
1050
992
  [data-padding="1.5"]{ padding:var(--t-spacing-1-half); }
1051
-
1052
993
  [data-padding="2"]{ padding:var(--t-spacing-2); }
1053
-
1054
994
  [data-padding="3"]{ padding:var(--t-spacing-3); }
1055
-
1056
995
  [data-padding="4"]{ padding:var(--t-spacing-4); }
1057
-
1058
996
  [data-padding="5"]{ padding:var(--t-spacing-5); }
1059
-
1060
997
  [data-padding="6"]{ padding:var(--t-spacing-6); }
1061
-
1062
998
  [data-padding="7"]{ padding:var(--t-spacing-7); }
1063
999
 
1064
1000
  [data-padding-block="0"]{ padding-block:0; }
1065
-
1066
1001
  [data-padding-block="0.25"]{ padding-block:var(--t-spacing-fourth); }
1067
-
1068
1002
  [data-padding-block="0.5"]{ padding-block:var(--t-spacing-half); }
1069
-
1070
1003
  [data-padding-block="1"]{ padding-block:var(--t-spacing-1); }
1071
-
1072
1004
  [data-padding-block="1.5"]{ padding-block:var(--t-spacing-1-half); }
1073
-
1074
1005
  [data-padding-block="2"]{ padding-block:var(--t-spacing-2); }
1075
-
1076
1006
  [data-padding-block="3"]{ padding-block:var(--t-spacing-3); }
1077
-
1078
1007
  [data-padding-block="4"]{ padding-block:var(--t-spacing-4); }
1079
-
1080
1008
  [data-padding-block="5"]{ padding-block:var(--t-spacing-5); }
1081
-
1082
1009
  [data-padding-block="6"]{ padding-block:var(--t-spacing-6); }
1083
-
1084
1010
  [data-padding-block="7"]{ padding-block:var(--t-spacing-7); }
1085
1011
 
1086
1012
  [data-padding-inline="0"]{ padding-inline:0; }
1087
-
1088
1013
  [data-padding-inline="0.25"]{ padding-inline:var(--t-spacing-fourth); }
1089
-
1090
1014
  [data-padding-inline="0.5"]{ padding-inline:var(--t-spacing-half); }
1091
-
1092
1015
  [data-padding-inline="1"]{ padding-inline:var(--t-spacing-1); }
1093
-
1094
1016
  [data-padding-inline="1.5"]{ padding-inline:var(--t-spacing-1-half); }
1095
-
1096
1017
  [data-padding-inline="2"]{ padding-inline:var(--t-spacing-2); }
1097
-
1098
1018
  [data-padding-inline="3"]{ padding-inline:var(--t-spacing-3); }
1099
-
1100
1019
  [data-padding-inline="4"]{ padding-inline:var(--t-spacing-4); }
1101
-
1102
1020
  [data-padding-inline="5"]{ padding-inline:var(--t-spacing-5); }
1103
-
1104
1021
  [data-padding-inline="6"]{ padding-inline:var(--t-spacing-6); }
1105
-
1106
1022
  [data-padding-inline="7"]{ padding-inline:var(--t-spacing-7); }
1107
-
1108
1023
  @media (min-width: 480px){
1109
1024
  [data-flex-direction-xs="row"]{ flex-direction:row; }
1110
1025
  [data-flex-direction-xs="row-reverse"]{ flex-direction:row-reverse; }
@@ -1217,7 +1132,6 @@
1217
1132
  [data-padding-inline-xs="6"]{ padding-inline:var(--t-spacing-6); }
1218
1133
  [data-padding-inline-xs="7"]{ padding-inline:var(--t-spacing-7); }
1219
1134
  }
1220
-
1221
1135
  @media (min-width: 600px){
1222
1136
  [data-flex-direction-sm="row"]{ flex-direction:row; }
1223
1137
  [data-flex-direction-sm="row-reverse"]{ flex-direction:row-reverse; }
@@ -1330,7 +1244,6 @@
1330
1244
  [data-padding-inline-sm="6"]{ padding-inline:var(--t-spacing-6); }
1331
1245
  [data-padding-inline-sm="7"]{ padding-inline:var(--t-spacing-7); }
1332
1246
  }
1333
-
1334
1247
  @media (min-width: 720px){
1335
1248
  [data-flex-direction-md="row"]{ flex-direction:row; }
1336
1249
  [data-flex-direction-md="row-reverse"]{ flex-direction:row-reverse; }
@@ -1443,7 +1356,6 @@
1443
1356
  [data-padding-inline-md="6"]{ padding-inline:var(--t-spacing-6); }
1444
1357
  [data-padding-inline-md="7"]{ padding-inline:var(--t-spacing-7); }
1445
1358
  }
1446
-
1447
1359
  @media (min-width: 960px){
1448
1360
  [data-flex-direction-lg="row"]{ flex-direction:row; }
1449
1361
  [data-flex-direction-lg="row-reverse"]{ flex-direction:row-reverse; }
@@ -1556,7 +1468,6 @@
1556
1468
  [data-padding-inline-lg="6"]{ padding-inline:var(--t-spacing-6); }
1557
1469
  [data-padding-inline-lg="7"]{ padding-inline:var(--t-spacing-7); }
1558
1470
  }
1559
-
1560
1471
  @media (min-width: 1200px){
1561
1472
  [data-flex-direction-xl="row"]{ flex-direction:row; }
1562
1473
  [data-flex-direction-xl="row-reverse"]{ flex-direction:row-reverse; }
@@ -1929,7 +1840,6 @@
1929
1840
  color:var(--tds-page-header-color);
1930
1841
  white-space:nowrap;
1931
1842
  }
1932
-
1933
1843
  .tds-page-header-email{
1934
1844
  max-width:100%;
1935
1845
  overflow:hidden;
@@ -2430,20 +2340,17 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2430
2340
  transition:none;
2431
2341
  }
2432
2342
  }
2433
-
2434
2343
  .tds-btn--xl{
2435
2344
  --tds-btn-padding-y:11px;
2436
2345
  --tds-btn-padding-x:18px;
2437
2346
  --tds-btn-padding-truncated-x:12px;
2438
2347
  --tds-btn-min-height:48px;
2439
2348
  }
2440
-
2441
2349
  .tds-btn--lg{
2442
2350
  --tds-btn-padding-y:7px;
2443
2351
  --tds-btn-padding-x:14px;
2444
2352
  --tds-btn-min-height:40px;
2445
2353
  }
2446
-
2447
2354
  .tds-btn--sm{
2448
2355
  --tds-btn-padding-y:.5px;
2449
2356
  --tds-btn-padding-x:7px;
@@ -2452,7 +2359,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2452
2359
  --tds-btn-font-size:var(--t-font-size-sm);
2453
2360
  --tds-btn-loading-spinner-track-width:3px;
2454
2361
  }
2455
-
2456
2362
  .tds-btn--xs{
2457
2363
  --tds-btn-padding-y:0;
2458
2364
  --tds-btn-padding-x:5px;
@@ -2872,12 +2778,27 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2872
2778
  .tds-button-group > .tds-btn{
2873
2779
  --tds-button-group-item-z-index:1;
2874
2780
 
2781
+ position:relative;
2875
2782
  z-index:var(--tds-button-group-item-z-index);
2876
2783
  border-radius:0;
2877
2784
  }
2878
2785
  :is(.tds-button-group > .tds-btn):not(:first-child){
2879
2786
  margin-inline-start:calc(var(--tds-btn-border-width) * -1);
2880
2787
  }
2788
+ :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{
2789
+ position:absolute;
2790
+ inset-block:calc(var(--tds-btn-border-width) * -1);
2791
+ width:var(--tds-btn-border-width);
2792
+ pointer-events:none;
2793
+ content:"";
2794
+ background-color:var(--t-border-color-white);
2795
+ }
2796
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
2797
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
2798
+ }
2799
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
2800
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
2801
+ }
2881
2802
  :is(.tds-button-group > .tds-btn):hover{
2882
2803
  --tds-button-group-item-z-index:2;
2883
2804
  }
@@ -3173,11 +3094,9 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3173
3094
  .tds-combo-box--lg{
3174
3095
  --tds-combo-box-button-offset:5px;
3175
3096
  }
3176
-
3177
3097
  .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
3178
3098
  display:none;
3179
3099
  }
3180
-
3181
3100
  .tds-combo-box-input{
3182
3101
  display:flex;
3183
3102
  flex:1;
@@ -3191,24 +3110,20 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3191
3110
  background:transparent;
3192
3111
  border:0;
3193
3112
  }
3194
-
3195
3113
  .tds-combo-box-input:has( + .tds-combo-box-button){
3196
3114
  padding-inline-end:0;
3197
3115
  }
3198
-
3199
3116
  .tds-combo-box-input::-moz-placeholder{
3200
3117
  color:var(--tds-field-placeholder-color);
3201
3118
  -moz-user-select:none;
3202
3119
  user-select:none;
3203
3120
  }
3204
-
3205
3121
  .tds-combo-box-input::placeholder{
3206
3122
  color:var(--tds-field-placeholder-color);
3207
3123
  -webkit-user-select:none;
3208
3124
  -moz-user-select:none;
3209
3125
  user-select:none;
3210
3126
  }
3211
-
3212
3127
  .tds-combo-box-button{
3213
3128
  flex-shrink:0;
3214
3129
  align-self:center;
@@ -3217,13 +3132,11 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3217
3132
  padding:0;
3218
3133
  margin-inline-end:var(--tds-combo-box-button-offset);
3219
3134
  }
3220
-
3221
3135
  .tds-combo-box-button > svg{
3222
3136
  inline-size:var(--tds-field-font-size);
3223
3137
  block-size:var(--tds-field-font-size);
3224
3138
  transition:transform var(--t-duration-300) var(--t-ease-in-out);
3225
3139
  }
3226
-
3227
3140
  .tds-combo-box-popover{
3228
3141
  width:var(--trigger-width);
3229
3142
  max-block-size:inherit;
@@ -3243,15 +3156,12 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3243
3156
  border-radius:var(--t-border-radius);
3244
3157
  box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3245
3158
  }
3246
-
3247
3159
  .tds-combo-box-popover[data-entering]{
3248
3160
  animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
3249
3161
  }
3250
-
3251
3162
  .tds-combo-box-popover[data-exiting]{
3252
3163
  animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
3253
3164
  }
3254
-
3255
3165
  .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3256
3166
  will-change:opacity, transform;
3257
3167
  }
@@ -3272,16 +3182,14 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3272
3182
  transition:none;
3273
3183
  }
3274
3184
  }
3275
-
3276
3185
  .tds-combo-box-list{
3277
3186
  padding:0;
3278
3187
  margin:0;
3279
3188
  }
3280
-
3281
3189
  .tds-combo-box-list-item{
3282
3190
  display:block;
3283
3191
  padding-block:var(--t-spacing-1);
3284
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3192
+ padding-inline:var(--t-spacing-1-half);
3285
3193
  overflow:hidden;
3286
3194
  text-overflow:ellipsis;
3287
3195
  font-size:1rem;
@@ -3290,28 +3198,22 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3290
3198
  cursor:default;
3291
3199
  border-radius:var(--t-border-radius);
3292
3200
  }
3293
-
3294
3201
  .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
3295
3202
  background:var(--t-fill-color-neutral-070);
3296
3203
  }
3297
-
3298
3204
  .tds-combo-box-list-item[data-selected]{
3299
3205
  background:var(--t-fill-color-button-interaction-ghost-active);
3300
3206
  }
3301
-
3302
3207
  .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
3303
3208
  background:var(--t-fill-color-neutral-060);
3304
3209
  }
3305
-
3306
3210
  .tds-combo-box-list-item[data-disabled]{
3307
3211
  color:var(--t-form-color-disabled);
3308
3212
  cursor:not-allowed;
3309
3213
  }
3310
-
3311
3214
  .tds-combo-box-list-item[data-disabled][data-hovered]{
3312
3215
  background:transparent;
3313
3216
  }
3314
-
3315
3217
  .tds-combo-box-empty-state{
3316
3218
  position:relative;
3317
3219
  min-block-size:var(--t-spacing-3);
@@ -3320,7 +3222,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3320
3222
  font-size:var(--t-font-size-md);
3321
3223
  color:var(--t-text-color-secondary);
3322
3224
  }
3323
-
3324
3225
  .tds-combo-box-load-more{
3325
3226
  position:relative;
3326
3227
  min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
@@ -3331,14 +3232,12 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3331
3232
  --tds-loading-spinner-visibility:visible;
3332
3233
  --tds-loading-spinner-animation-play-state:running;
3333
3234
  }
3334
-
3335
3235
  .tds-combo-box-list-section:not(:first-child){
3336
3236
  margin-block-start:var(--t-spacing-half);
3337
3237
  }
3338
-
3339
3238
  .tds-combo-box-section-header{
3340
3239
  padding-block:var(--t-spacing-1);
3341
- padding-inline:var(--t-spacing-1);
3240
+ padding-inline:var(--t-spacing-half);
3342
3241
  font-size:var(--t-font-size-sm);
3343
3242
  font-weight:var(--t-font-weight-semibold);
3344
3243
  color:var(--t-text-color-secondary);
@@ -3538,7 +3437,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3538
3437
  margin-block-start:calc(.5lh - .5em);
3539
3438
  line-height:var(--tds-field-description-line-height);
3540
3439
  }
3541
-
3542
3440
  .tds-field-date-segment{
3543
3441
  padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
3544
3442
  text-align:end;
@@ -3546,17 +3444,14 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3546
3444
  caret-color:transparent;
3547
3445
  border-radius:var(--t-border-radius-sm);
3548
3446
  }
3549
-
3550
3447
  .tds-field-date-segment[data-placeholder]{
3551
3448
  color:var(--tds-field-placeholder-color);
3552
3449
  }
3553
-
3554
3450
  .tds-field-date-segment[data-focused]{
3555
3451
  color:var(--t-text-color-inverted);
3556
3452
  outline:0;
3557
3453
  background-color:var(--t-fill-color-interaction);
3558
3454
  }
3559
-
3560
3455
  .tds-field-date-segment-separator{
3561
3456
  padding-inline:0;
3562
3457
  color:var(--tds-field-placeholder-color);
@@ -3573,17 +3468,14 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3573
3468
  .tds-date-picker--lg{
3574
3469
  --tds-date-picker-button-offset:5px;
3575
3470
  }
3576
-
3577
3471
  .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
3578
3472
  outline-color:transparent;
3579
3473
  outline-offset:0;
3580
3474
  border-color:var(--tds-field-border-color);
3581
3475
  }
3582
-
3583
3476
  .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
3584
3477
  display:none;
3585
3478
  }
3586
-
3587
3479
  .tds-date-picker-input{
3588
3480
  flex:1;
3589
3481
  padding-block:var(--tds-field-padding-block);
@@ -3593,11 +3485,9 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3593
3485
  text-wrap:nowrap;
3594
3486
  scrollbar-width:none;
3595
3487
  }
3596
-
3597
3488
  .tds-date-picker-input:has( + .tds-date-picker-button){
3598
3489
  padding-inline-end:0;
3599
3490
  }
3600
-
3601
3491
  .tds-date-picker-button{
3602
3492
  flex-shrink:0;
3603
3493
  align-self:center;
@@ -3606,7 +3496,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3606
3496
  padding:0;
3607
3497
  margin-inline-end:var(--tds-date-picker-button-offset);
3608
3498
  }
3609
-
3610
3499
  .tds-date-picker-popover{
3611
3500
  --tds-date-picker-popover-font-size:var(--t-font-size-md);
3612
3501
  --tds-date-picker-popover-padding:var(--t-spacing-1-half);
@@ -3623,15 +3512,12 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3623
3512
  border-radius:var(--t-border-radius);
3624
3513
  box-shadow:var(--tds-date-picker-popover-shadow);
3625
3514
  }
3626
-
3627
3515
  .tds-date-picker-popover[data-entering]{
3628
3516
  animation:tds-date-picker-popover var(--t-duration-300) var(--t-ease-out);
3629
3517
  }
3630
-
3631
3518
  .tds-date-picker-popover[data-exiting]{
3632
3519
  animation:tds-date-picker-popover var(--t-duration-200) var(--t-ease-in) reverse;
3633
3520
  }
3634
-
3635
3521
  .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3636
3522
  will-change:opacity, transform;
3637
3523
  }
@@ -3648,7 +3534,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3648
3534
  animation:none;
3649
3535
  }
3650
3536
  }
3651
-
3652
3537
  .tds-date-picker-overlay{
3653
3538
  position:absolute;
3654
3539
  inset:0;
@@ -3656,7 +3541,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3656
3541
  display:flex;
3657
3542
  background-color:var(--tds-date-picker-popover-background-color);
3658
3543
  }
3659
-
3660
3544
  .tds-date-picker-overlay-list{
3661
3545
  display:grid;
3662
3546
  flex:1;
@@ -3679,7 +3563,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3679
3563
  overflow-y:auto;
3680
3564
  scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
3681
3565
  }
3682
-
3683
3566
  .tds-date-picker-overlay-cell{
3684
3567
  display:flex;
3685
3568
  align-items:center;
@@ -3696,29 +3579,23 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3696
3579
  transition-duration:var(--t-duration-100);
3697
3580
  transition-property:var(--tds-date-picker-popover-interactive-property);
3698
3581
  }
3699
-
3700
3582
  .tds-date-picker-overlay-cell[data-hovered]{
3701
3583
  background-color:var(--t-fill-color-button-neutral-outline-hover);
3702
3584
  }
3703
-
3704
3585
  .tds-date-picker-overlay-cell[data-pressed]{
3705
3586
  background-color:var(--t-fill-color-button-neutral-outline-active);
3706
3587
  }
3707
-
3708
3588
  .tds-date-picker-overlay-cell[data-selected]{
3709
3589
  font-weight:var(--t-font-weight-semibold);
3710
3590
  color:var(--t-text-color-inverted);
3711
3591
  background-color:var(--t-fill-color-interaction);
3712
3592
  }
3713
-
3714
3593
  .tds-date-picker-overlay-cell[data-focus-visible]{
3715
3594
  outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3716
3595
  }
3717
-
3718
3596
  .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
3719
3597
  outline-offset:var(--t-focus-ring-offset);
3720
3598
  }
3721
-
3722
3599
  .tds-date-picker-calendar-heading{
3723
3600
  display:flex;
3724
3601
  flex:1;
@@ -3727,7 +3604,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3727
3604
  justify-content:flex-start;
3728
3605
  padding-inline-start:4px;
3729
3606
  }
3730
-
3731
3607
  .tds-date-picker-calendar-overlay-trigger{
3732
3608
  --_background-color:transparent;
3733
3609
  position:relative;
@@ -3747,7 +3623,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3747
3623
  transition-duration:var(--tds-date-picker-popover-interactive-duration);
3748
3624
  transition-property:var(--tds-date-picker-popover-interactive-property);
3749
3625
  }
3750
-
3751
3626
  .tds-date-picker-calendar-overlay-trigger::before{
3752
3627
  position:absolute;
3753
3628
  inset:calc(var(--t-spacing-half) * -1);
@@ -3757,32 +3632,26 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3757
3632
  background-color:var(--_background-color);
3758
3633
  border-radius:inherit;
3759
3634
  }
3760
-
3761
3635
  .tds-date-picker-calendar-overlay-trigger[data-hovered]{
3762
3636
  --_background-color:var(--t-fill-color-button-neutral-outline-hover);
3763
3637
  }
3764
-
3765
3638
  .tds-date-picker-calendar-overlay-trigger[data-pressed]{
3766
3639
  --_background-color:var(--t-fill-color-button-neutral-outline-active);
3767
3640
  }
3768
-
3769
3641
  .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
3770
3642
  outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3771
3643
  outline-offset:var(--t-focus-ring-offset);
3772
3644
  }
3773
-
3774
3645
  .tds-date-picker-calendar{
3775
3646
  inline-size:-moz-fit-content;
3776
3647
  inline-size:fit-content;
3777
3648
  font-size:var(--tds-date-picker-popover-font-size);
3778
3649
  }
3779
-
3780
3650
  .tds-date-picker-calendar-body{
3781
3651
  position:relative;
3782
3652
  padding:var(--tds-date-picker-popover-padding);
3783
3653
  padding-block-start:0;
3784
3654
  }
3785
-
3786
3655
  .tds-date-picker-calendar-header{
3787
3656
  display:flex;
3788
3657
  align-items:center;
@@ -3795,7 +3664,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3795
3664
  font-size:var(--tds-date-picker-popover-font-size);
3796
3665
  font-weight:var(--t-font-weight-semibold);
3797
3666
  }
3798
-
3799
3667
  .tds-date-picker-calendar-nav{
3800
3668
  display:flex;
3801
3669
  align-items:center;
@@ -3812,30 +3680,24 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3812
3680
  transition-duration:var(--tds-date-picker-popover-interactive-duration);
3813
3681
  transition-property:var(--tds-date-picker-popover-interactive-property);
3814
3682
  }
3815
-
3816
3683
  .tds-date-picker-calendar-nav[data-hovered]{
3817
3684
  background-color:var(--t-fill-color-button-neutral-outline-hover);
3818
3685
  }
3819
-
3820
3686
  .tds-date-picker-calendar-nav[data-pressed]{
3821
3687
  background-color:var(--t-fill-color-button-neutral-outline-active);
3822
3688
  }
3823
-
3824
3689
  .tds-date-picker-calendar-nav[data-focus-visible]{
3825
3690
  outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3826
3691
  outline-offset:var(--t-focus-ring-offset);
3827
3692
  }
3828
-
3829
3693
  .tds-date-picker-calendar-nav[data-disabled]{
3830
3694
  color:var(--t-text-color-disabled);
3831
3695
  cursor:not-allowed;
3832
3696
  }
3833
-
3834
3697
  .tds-date-picker-calendar-grid{
3835
3698
  font-feature-settings:"ss01", "ss02";
3836
3699
  border-collapse:collapse;
3837
3700
  }
3838
-
3839
3701
  .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
3840
3702
  padding:0;
3841
3703
  border:0;
@@ -3851,7 +3713,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3851
3713
  -moz-user-select:none;
3852
3714
  user-select:none;
3853
3715
  }
3854
-
3855
3716
  .tds-date-picker-calendar-cell-button{
3856
3717
  position:relative;
3857
3718
  display:flex;
@@ -3866,7 +3727,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3866
3727
  user-select:none;
3867
3728
  outline:0;
3868
3729
  }
3869
-
3870
3730
  .tds-date-picker-calendar-cell-button::before{
3871
3731
  position:absolute;
3872
3732
  inset:0;
@@ -3875,45 +3735,36 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3875
3735
  background-color:var(--_background-color);
3876
3736
  border-radius:50%;
3877
3737
  }
3878
-
3879
3738
  .tds-date-picker-calendar-cell-button[data-today]::before{
3880
3739
  box-shadow:inset 0 0 0 1.5px var(--t-border-color);
3881
3740
  }
3882
-
3883
3741
  .tds-date-picker-calendar-cell-button[data-outside-month]{
3884
3742
  display:none;
3885
3743
  }
3886
-
3887
3744
  .tds-date-picker-calendar-cell-button[data-hovered]{
3888
3745
  --_background-color:var(--t-fill-color-button-neutral-outline-hover);
3889
3746
  }
3890
-
3891
3747
  .tds-date-picker-calendar-cell-button[data-pressed]{
3892
3748
  --_background-color:var(--t-fill-color-button-neutral-outline-active);
3893
3749
  }
3894
-
3895
3750
  .tds-date-picker-calendar-cell-button[data-selected]{
3896
3751
  --_background-color:var(--t-fill-color-interaction);
3897
3752
  font-weight:var(--t-font-weight-semibold);
3898
3753
  color:var(--t-text-color-inverted);
3899
3754
  border-color:transparent;
3900
3755
  }
3901
-
3902
3756
  .tds-date-picker-calendar-cell-button[data-unavailable]{
3903
3757
  color:var(--t-text-color-disabled);
3904
3758
  text-decoration:line-through;
3905
3759
  cursor:not-allowed;
3906
3760
  }
3907
-
3908
3761
  .tds-date-picker-calendar-cell-button[data-disabled]{
3909
3762
  color:var(--t-text-color-disabled);
3910
3763
  }
3911
-
3912
3764
  .tds-date-picker-calendar-cell-button[data-focus-visible]{
3913
3765
  outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3914
3766
  outline-offset:-2px;
3915
3767
  }
3916
-
3917
3768
  .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
3918
3769
  outline-offset:var(--t-focus-ring-offset);
3919
3770
  }
@@ -3949,17 +3800,20 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3949
3800
  .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
3950
3801
  will-change:opacity, transform;
3951
3802
  }
3803
+
3952
3804
  @keyframes tds-dropdown-popover{
3953
3805
  from{
3954
3806
  opacity:0;
3955
3807
  transform:translateY(-8px);
3956
3808
  }
3957
3809
  }
3810
+
3958
3811
  @media (prefers-reduced-motion: reduce){
3959
3812
  .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
3960
3813
  animation:none;
3961
3814
  }
3962
3815
  }
3816
+
3963
3817
  .tds-dropdown-popover [role="menu"]{
3964
3818
  outline:0;
3965
3819
  }
@@ -3974,7 +3828,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3974
3828
  column-gap:var(--tds-dropdown-item-column-gap);
3975
3829
  align-items:center;
3976
3830
  padding-block:var(--t-spacing-1);
3977
- padding-inline:var(--t-spacing-2);
3831
+ padding-inline:var(--t-spacing-1-half);
3978
3832
  font-size:1rem;
3979
3833
  color:var(--tds-dropdown-item-color);
3980
3834
  text-decoration:none;
@@ -3993,9 +3847,11 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3993
3847
 
3994
3848
  cursor:not-allowed;
3995
3849
  }
3850
+
3996
3851
  .tds-dropdown-item--destructive{
3997
3852
  --tds-dropdown-item-color:var(--t-text-color-status-error);
3998
3853
  }
3854
+
3999
3855
  .tds-dropdown-item--staff-only{
4000
3856
  --tds-dropdown-item-color:var(--t-fill-color-product-staff);
4001
3857
  }
@@ -4006,6 +3862,7 @@ a.tds-dropdown-item:is(:hover, :active){
4006
3862
  .tds-dropdown-item [slot="suffix"]{
4007
3863
  flex-shrink:0;
4008
3864
  }
3865
+
4009
3866
  .tds-dropdown-item [slot="label"]{
4010
3867
  flex:1;
4011
3868
  min-width:0;
@@ -4013,10 +3870,12 @@ a.tds-dropdown-item:is(:hover, :active){
4013
3870
  text-overflow:ellipsis;
4014
3871
  white-space:nowrap;
4015
3872
  }
3873
+
4016
3874
  .tds-dropdown-item [slot="description"]{
4017
3875
  font-size:var(--t-font-size-sm);
4018
3876
  color:var(--t-text-color-secondary);
4019
3877
  }
3878
+
4020
3879
  .tds-dropdown-item:has([slot="description"]){
4021
3880
  --tds-dropdown-item-row-gap:var(--t-spacing-half);
4022
3881
  --tds-dropdown-item-column-gap:0;
@@ -4025,16 +3884,20 @@ a.tds-dropdown-item:is(:hover, :active){
4025
3884
  grid-template-areas:"prefix label suffix" ". description .";
4026
3885
  grid-template-columns:auto 1fr auto;
4027
3886
  }
3887
+
4028
3888
  .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
4029
3889
  grid-area:prefix;
4030
3890
  margin-inline-end:var(--t-spacing-1);
4031
3891
  }
3892
+
4032
3893
  .tds-dropdown-item:has([slot="description"]) [slot="label"]{
4033
3894
  grid-area:label;
4034
3895
  }
3896
+
4035
3897
  .tds-dropdown-item:has([slot="description"]) [slot="description"]{
4036
3898
  grid-area:description;
4037
3899
  }
3900
+
4038
3901
  .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
4039
3902
  grid-area:suffix;
4040
3903
  margin-inline-start:var(--t-spacing-1);
@@ -4042,9 +3905,10 @@ a.tds-dropdown-item:is(:hover, :active){
4042
3905
  .tds-dropdown-section:not(:first-child){
4043
3906
  margin-block-start:var(--t-spacing-half);
4044
3907
  }
3908
+
4045
3909
  .tds-dropdown-section-label{
4046
3910
  padding-block:var(--t-spacing-1);
4047
- padding-inline:var(--t-spacing-1);
3911
+ padding-inline:var(--t-spacing-half);
4048
3912
  font-size:var(--t-font-size-sm);
4049
3913
  font-weight:var(--t-font-weight-semibold);
4050
3914
  color:var(--t-text-color-secondary);
@@ -4059,206 +3923,121 @@ a.tds-dropdown-item:is(:hover, :active){
4059
3923
  .tds-flex{ display:flex; }
4060
3924
 
4061
3925
  [data-flex-inline]{ display:inline-flex; }
4062
-
4063
3926
  [data-flex-expand]{
4064
3927
  flex:1 1 0%;
4065
3928
  min-width:0;
4066
3929
  }
4067
3930
 
4068
3931
  [data-flex-direction="row"]{ flex-direction:row; }
4069
-
4070
3932
  [data-flex-direction="row-reverse"]{ flex-direction:row-reverse; }
4071
-
4072
3933
  [data-flex-direction="column"]{ flex-direction:column; }
4073
-
4074
3934
  [data-flex-direction="column-reverse"]{ flex-direction:column-reverse; }
4075
3935
 
4076
3936
  [data-flex-align="stretch"]{ align-items:stretch; }
4077
-
4078
3937
  [data-flex-align="start"]{ align-items:start; }
4079
-
4080
3938
  [data-flex-align="center"]{ align-items:center; }
4081
-
4082
3939
  [data-flex-align="end"]{ align-items:end; }
4083
-
4084
3940
  [data-flex-align="baseline"]{ align-items:baseline; }
4085
3941
 
4086
3942
  [data-flex-align-self="auto"]{ align-self:auto; }
4087
-
4088
3943
  [data-flex-align-self="stretch"]{ align-self:stretch; }
4089
-
4090
3944
  [data-flex-align-self="start"]{ align-self:start; }
4091
-
4092
3945
  [data-flex-align-self="center"]{ align-self:center; }
4093
-
4094
3946
  [data-flex-align-self="end"]{ align-self:end; }
4095
-
4096
3947
  [data-flex-align-self="baseline"]{ align-self:baseline; }
4097
3948
 
4098
3949
  [data-flex-justify="start"]{ justify-content:start; }
4099
-
4100
3950
  [data-flex-justify="center"]{ justify-content:center; }
4101
-
4102
3951
  [data-flex-justify="end"]{ justify-content:end; }
4103
-
4104
3952
  [data-flex-justify="space-between"]{ justify-content:space-between; }
4105
-
4106
3953
  [data-flex-justify="space-around"]{ justify-content:space-around; }
4107
-
4108
3954
  [data-flex-justify="space-evenly"]{ justify-content:space-evenly; }
4109
3955
 
4110
3956
  [data-flex-wrap="nowrap"]{ flex-wrap:nowrap; }
4111
-
4112
3957
  [data-flex-wrap="wrap"]{ flex-wrap:wrap; }
4113
-
4114
3958
  [data-flex-wrap="wrap-reverse"]{ flex-wrap:wrap-reverse; }
4115
3959
 
4116
3960
  [data-flex-grow="0"]{ flex-grow:0; }
4117
-
4118
3961
  [data-flex-grow="1"]{ flex-grow:1; }
4119
3962
 
4120
3963
  [data-flex-shrink="0"]{ flex-shrink:0; }
4121
-
4122
3964
  [data-flex-shrink="1"]{ flex-shrink:1; }
4123
3965
 
4124
3966
  [data-flex-gap="0"]{ gap:0; }
4125
-
4126
3967
  [data-flex-gap="0.25"]{ gap:var(--t-spacing-fourth); }
4127
-
4128
3968
  [data-flex-gap="0.5"]{ gap:var(--t-spacing-half); }
4129
-
4130
3969
  [data-flex-gap="1"]{ gap:var(--t-spacing-1); }
4131
-
4132
3970
  [data-flex-gap="1.5"]{ gap:var(--t-spacing-1-half); }
4133
-
4134
3971
  [data-flex-gap="2"]{ gap:var(--t-spacing-2); }
4135
-
4136
3972
  [data-flex-gap="3"]{ gap:var(--t-spacing-3); }
4137
-
4138
3973
  [data-flex-gap="4"]{ gap:var(--t-spacing-4); }
4139
-
4140
3974
  [data-flex-gap="5"]{ gap:var(--t-spacing-5); }
4141
-
4142
3975
  [data-flex-gap="6"]{ gap:var(--t-spacing-6); }
4143
-
4144
3976
  [data-flex-gap="7"]{ gap:var(--t-spacing-7); }
4145
3977
 
4146
3978
  [data-flex-row-gap="0"]{ row-gap:0; }
4147
-
4148
3979
  [data-flex-row-gap="0.25"]{ row-gap:var(--t-spacing-fourth); }
4149
-
4150
3980
  [data-flex-row-gap="0.5"]{ row-gap:var(--t-spacing-half); }
4151
-
4152
3981
  [data-flex-row-gap="1"]{ row-gap:var(--t-spacing-1); }
4153
-
4154
3982
  [data-flex-row-gap="1.5"]{ row-gap:var(--t-spacing-1-half); }
4155
-
4156
3983
  [data-flex-row-gap="2"]{ row-gap:var(--t-spacing-2); }
4157
-
4158
3984
  [data-flex-row-gap="3"]{ row-gap:var(--t-spacing-3); }
4159
-
4160
3985
  [data-flex-row-gap="4"]{ row-gap:var(--t-spacing-4); }
4161
-
4162
3986
  [data-flex-row-gap="5"]{ row-gap:var(--t-spacing-5); }
4163
-
4164
3987
  [data-flex-row-gap="6"]{ row-gap:var(--t-spacing-6); }
4165
-
4166
3988
  [data-flex-row-gap="7"]{ row-gap:var(--t-spacing-7); }
4167
3989
 
4168
3990
  [data-flex-column-gap="0"]{ -moz-column-gap:0; column-gap:0; }
4169
-
4170
3991
  [data-flex-column-gap="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
4171
-
4172
3992
  [data-flex-column-gap="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
4173
-
4174
3993
  [data-flex-column-gap="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
4175
-
4176
3994
  [data-flex-column-gap="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
4177
-
4178
3995
  [data-flex-column-gap="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
4179
-
4180
3996
  [data-flex-column-gap="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
4181
-
4182
3997
  [data-flex-column-gap="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
4183
-
4184
3998
  [data-flex-column-gap="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
4185
-
4186
3999
  [data-flex-column-gap="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
4187
-
4188
4000
  [data-flex-column-gap="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4189
4001
 
4190
4002
  [data-flex-basis="auto"]{ flex-basis:auto; }
4191
-
4192
4003
  [data-flex-basis="0"]{ flex-basis:0; }
4193
-
4194
4004
  [data-flex-basis="100%"]{ flex-basis:100%; }
4195
4005
 
4196
4006
  [data-padding="0"]{ padding:0; }
4197
-
4198
4007
  [data-padding="0.25"]{ padding:var(--t-spacing-fourth); }
4199
-
4200
4008
  [data-padding="0.5"]{ padding:var(--t-spacing-half); }
4201
-
4202
4009
  [data-padding="1"]{ padding:var(--t-spacing-1); }
4203
-
4204
4010
  [data-padding="1.5"]{ padding:var(--t-spacing-1-half); }
4205
-
4206
4011
  [data-padding="2"]{ padding:var(--t-spacing-2); }
4207
-
4208
4012
  [data-padding="3"]{ padding:var(--t-spacing-3); }
4209
-
4210
4013
  [data-padding="4"]{ padding:var(--t-spacing-4); }
4211
-
4212
4014
  [data-padding="5"]{ padding:var(--t-spacing-5); }
4213
-
4214
4015
  [data-padding="6"]{ padding:var(--t-spacing-6); }
4215
-
4216
4016
  [data-padding="7"]{ padding:var(--t-spacing-7); }
4217
4017
 
4218
4018
  [data-padding-block="0"]{ padding-block:0; }
4219
-
4220
4019
  [data-padding-block="0.25"]{ padding-block:var(--t-spacing-fourth); }
4221
-
4222
4020
  [data-padding-block="0.5"]{ padding-block:var(--t-spacing-half); }
4223
-
4224
4021
  [data-padding-block="1"]{ padding-block:var(--t-spacing-1); }
4225
-
4226
4022
  [data-padding-block="1.5"]{ padding-block:var(--t-spacing-1-half); }
4227
-
4228
4023
  [data-padding-block="2"]{ padding-block:var(--t-spacing-2); }
4229
-
4230
4024
  [data-padding-block="3"]{ padding-block:var(--t-spacing-3); }
4231
-
4232
4025
  [data-padding-block="4"]{ padding-block:var(--t-spacing-4); }
4233
-
4234
4026
  [data-padding-block="5"]{ padding-block:var(--t-spacing-5); }
4235
-
4236
4027
  [data-padding-block="6"]{ padding-block:var(--t-spacing-6); }
4237
-
4238
4028
  [data-padding-block="7"]{ padding-block:var(--t-spacing-7); }
4239
4029
 
4240
4030
  [data-padding-inline="0"]{ padding-inline:0; }
4241
-
4242
4031
  [data-padding-inline="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4243
-
4244
4032
  [data-padding-inline="0.5"]{ padding-inline:var(--t-spacing-half); }
4245
-
4246
4033
  [data-padding-inline="1"]{ padding-inline:var(--t-spacing-1); }
4247
-
4248
4034
  [data-padding-inline="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4249
-
4250
4035
  [data-padding-inline="2"]{ padding-inline:var(--t-spacing-2); }
4251
-
4252
4036
  [data-padding-inline="3"]{ padding-inline:var(--t-spacing-3); }
4253
-
4254
4037
  [data-padding-inline="4"]{ padding-inline:var(--t-spacing-4); }
4255
-
4256
4038
  [data-padding-inline="5"]{ padding-inline:var(--t-spacing-5); }
4257
-
4258
4039
  [data-padding-inline="6"]{ padding-inline:var(--t-spacing-6); }
4259
-
4260
4040
  [data-padding-inline="7"]{ padding-inline:var(--t-spacing-7); }
4261
-
4262
4041
  @media (min-width: 480px){
4263
4042
  [data-flex-direction-xs="row"]{ flex-direction:row; }
4264
4043
  [data-flex-direction-xs="row-reverse"]{ flex-direction:row-reverse; }
@@ -4371,7 +4150,6 @@ a.tds-dropdown-item:is(:hover, :active){
4371
4150
  [data-padding-inline-xs="6"]{ padding-inline:var(--t-spacing-6); }
4372
4151
  [data-padding-inline-xs="7"]{ padding-inline:var(--t-spacing-7); }
4373
4152
  }
4374
-
4375
4153
  @media (min-width: 600px){
4376
4154
  [data-flex-direction-sm="row"]{ flex-direction:row; }
4377
4155
  [data-flex-direction-sm="row-reverse"]{ flex-direction:row-reverse; }
@@ -4484,7 +4262,6 @@ a.tds-dropdown-item:is(:hover, :active){
4484
4262
  [data-padding-inline-sm="6"]{ padding-inline:var(--t-spacing-6); }
4485
4263
  [data-padding-inline-sm="7"]{ padding-inline:var(--t-spacing-7); }
4486
4264
  }
4487
-
4488
4265
  @media (min-width: 720px){
4489
4266
  [data-flex-direction-md="row"]{ flex-direction:row; }
4490
4267
  [data-flex-direction-md="row-reverse"]{ flex-direction:row-reverse; }
@@ -4597,7 +4374,6 @@ a.tds-dropdown-item:is(:hover, :active){
4597
4374
  [data-padding-inline-md="6"]{ padding-inline:var(--t-spacing-6); }
4598
4375
  [data-padding-inline-md="7"]{ padding-inline:var(--t-spacing-7); }
4599
4376
  }
4600
-
4601
4377
  @media (min-width: 960px){
4602
4378
  [data-flex-direction-lg="row"]{ flex-direction:row; }
4603
4379
  [data-flex-direction-lg="row-reverse"]{ flex-direction:row-reverse; }
@@ -4710,7 +4486,6 @@ a.tds-dropdown-item:is(:hover, :active){
4710
4486
  [data-padding-inline-lg="6"]{ padding-inline:var(--t-spacing-6); }
4711
4487
  [data-padding-inline-lg="7"]{ padding-inline:var(--t-spacing-7); }
4712
4488
  }
4713
-
4714
4489
  @media (min-width: 1200px){
4715
4490
  [data-flex-direction-xl="row"]{ flex-direction:row; }
4716
4491
  [data-flex-direction-xl="row-reverse"]{ flex-direction:row-reverse; }
@@ -4834,7 +4609,6 @@ a.tds-dropdown-item:is(:hover, :active){
4834
4609
  inline-size:1em;
4835
4610
  block-size:2em;
4836
4611
  }
4837
-
4838
4612
  @supports (field-sizing: content){
4839
4613
  .tds-input--auto-width{
4840
4614
  inline-size:-moz-fit-content;
@@ -5138,11 +4912,9 @@ a.tds-dropdown-item:is(:hover, :active){
5138
4912
  --tds-number-stepper-button-offset:5px;
5139
4913
  --tds-number-stepper-button-gap:4px;
5140
4914
  }
5141
-
5142
4915
  .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
5143
4916
  display:none;
5144
4917
  }
5145
-
5146
4918
  .tds-number-stepper-input{
5147
4919
  display:flex;
5148
4920
  flex:1;
@@ -5157,13 +4929,11 @@ a.tds-dropdown-item:is(:hover, :active){
5157
4929
  background:transparent;
5158
4930
  border:0;
5159
4931
  }
5160
-
5161
4932
  .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
5162
4933
  margin:0;
5163
4934
  -webkit-appearance:none;
5164
4935
  appearance:none;
5165
4936
  }
5166
-
5167
4937
  .tds-number-stepper-button{
5168
4938
  flex-shrink:0;
5169
4939
  align-self:center;
@@ -5171,11 +4941,9 @@ a.tds-dropdown-item:is(:hover, :active){
5171
4941
  block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
5172
4942
  padding:0;
5173
4943
  }
5174
-
5175
4944
  .tds-number-stepper-button + .tds-number-stepper-button{
5176
4945
  margin-inline-start:var(--tds-number-stepper-button-gap);
5177
4946
  }
5178
-
5179
4947
  .tds-number-stepper-button:last-of-type{
5180
4948
  margin-inline-end:var(--tds-number-stepper-button-offset);
5181
4949
  }
@@ -5396,6 +5164,135 @@ a.tds-dropdown-item:is(:hover, :active){
5396
5164
  --tds-radio-group-description-line-height:1.3;
5397
5165
  }
5398
5166
 
5167
+ .tds-search-input-control{
5168
+ --tds-search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
5169
+ --tds-search-input-outline-offset:0;
5170
+ --tds-search-input-cursor:text;
5171
+
5172
+ display:flex;
5173
+ gap:var(--tds-field-padding-inline);
5174
+ align-items:center;
5175
+ inline-size:100%;
5176
+ min-block-size:var(--tds-field-min-height);
5177
+ padding-inline:var(--tds-field-padding-inline);
5178
+ font-size:var(--tds-field-font-size);
5179
+ color:var(--tds-field-color);
5180
+ cursor:var(--tds-search-input-cursor);
5181
+ outline:var(--t-focus-ring-width) solid transparent;
5182
+ outline-color:var(--tds-search-input-outline-color);
5183
+ outline-offset:var(--tds-search-input-outline-offset);
5184
+ background-color:var(--tds-field-background-color);
5185
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
5186
+ border-radius:var(--t-form-border-radius);
5187
+ transition-timing-function:var(--t-ease-in-out);
5188
+ transition-duration:var(--t-duration-200);
5189
+ transition-property:background-color, border-color, outline-color, outline-offset;
5190
+ }
5191
+
5192
+ .tds-search-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
5193
+ border-color:var(--tds-field-border-color-hover);
5194
+ }
5195
+
5196
+ .tds-search-input-control:has(input:focus){
5197
+ --tds-search-input-outline-color:var(--t-focus-ring-color);
5198
+ --tds-search-input-outline-offset:var(--t-focus-ring-offset);
5199
+
5200
+ border-color:var(--t-form-border-color-focus);
5201
+ }
5202
+
5203
+ .tds-search-input-control input{
5204
+ flex:1;
5205
+ min-inline-size:0;
5206
+ padding:0;
5207
+ overflow:hidden;
5208
+ text-overflow:ellipsis;
5209
+ font-family:inherit;
5210
+ font-size:inherit;
5211
+ color:inherit;
5212
+ white-space:nowrap;
5213
+ -webkit-appearance:none;
5214
+ -moz-appearance:none;
5215
+ appearance:none;
5216
+ outline:0;
5217
+ background-color:transparent;
5218
+ border:0;
5219
+ }
5220
+
5221
+ :is(.tds-search-input-control input)::-moz-placeholder{
5222
+ color:var(--tds-field-placeholder-color);
5223
+ -moz-user-select:none;
5224
+ user-select:none;
5225
+ }
5226
+
5227
+ :is(.tds-search-input-control input)::placeholder{
5228
+ color:var(--tds-field-placeholder-color);
5229
+ -webkit-user-select:none;
5230
+ -moz-user-select:none;
5231
+ user-select:none;
5232
+ }
5233
+
5234
+ :is(.tds-search-input-control input)::-webkit-search-decoration,:is(.tds-search-input-control input)::-webkit-search-cancel-button,:is(.tds-search-input-control input)::-webkit-search-results-button,:is(.tds-search-input-control input)::-webkit-search-results-decoration{
5235
+ -webkit-appearance:none;
5236
+ appearance:none;
5237
+ }
5238
+
5239
+ .tds-search-input-control .tds-search-input-icon{
5240
+ flex-shrink:0;
5241
+ inline-size:1em;
5242
+ color:var(--t-icon-color-dim);
5243
+ }
5244
+
5245
+ .tds-search-input-control .tds-search-input-clear-icon{
5246
+ inline-size:calc(var(--tds-field-font-size) * .8);
5247
+ block-size:calc(var(--tds-field-font-size) * .8);
5248
+ }
5249
+
5250
+ .tds-search-input-control .tds-btn{
5251
+ --tds-btn-color:var(--t-icon-color-dim);
5252
+ --tds-btn-padding-truncated-x:0;
5253
+ --tds-search-input-clear-button-visibility:hidden;
5254
+
5255
+ visibility:var(--tds-search-input-clear-button-visibility);
5256
+ flex-shrink:0;
5257
+ }
5258
+
5259
+ .tds-search-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
5260
+ --tds-field-background-color:var(--t-form-background-color-error);
5261
+ --tds-field-border-color:var(--t-form-border-color-error);
5262
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
5263
+ }
5264
+
5265
+ .tds-search-input-control:has(:disabled){
5266
+ --tds-field-border-color:var(--t-form-border-color-disabled);
5267
+ --tds-field-background-color:var(--t-form-background-color-disabled);
5268
+ --tds-field-color:var(--t-form-color-disabled);
5269
+ --tds-search-input-cursor:not-allowed;
5270
+ }
5271
+
5272
+ .tds-search-input-control:has([readonly]){
5273
+ --tds-field-border-color:var(--t-form-border-color-readonly);
5274
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
5275
+ --tds-field-background-color:var(--t-form-background-color-readonly);
5276
+ --tds-field-color:var(--t-form-color-readonly);
5277
+ }
5278
+
5279
+ .tds-search-input-control:has([readonly]):has(input:focus){
5280
+ border-color:var(--t-form-border-color-hover);
5281
+ }
5282
+
5283
+ @media (prefers-reduced-motion: reduce){
5284
+
5285
+ .tds-search-input-control{
5286
+ transition-property:none;
5287
+ }
5288
+ }
5289
+
5290
+ .tds-search-input-control--has-value:is(:hover, :has(input:focus)):not(
5291
+ :has(:disabled, [readonly])
5292
+ ) .tds-btn{
5293
+ --tds-search-input-clear-button-visibility:visible;
5294
+ }
5295
+
5399
5296
  .tds-select{
5400
5297
  --tds-select-border-color:var(--t-form-border-color);
5401
5298
  --tds-select-border-color-hover:var(--t-form-border-color-hover);
@@ -5430,7 +5327,7 @@ a.tds-dropdown-item:is(:hover, :active){
5430
5327
 
5431
5328
  --tds-select-option-gap:var(--t-spacing-1);
5432
5329
  --tds-select-option-padding-block:var(--t-spacing-fourth);
5433
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
5330
+ --tds-select-option-padding-inline:var(--t-spacing-1-half);
5434
5331
  --tds-select-option-font-size:1rem;
5435
5332
  --tds-select-option-color:var(--t-text-color);
5436
5333
  --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
@@ -5439,7 +5336,7 @@ a.tds-dropdown-item:is(:hover, :active){
5439
5336
 
5440
5337
  --tds-select-group-label-padding-block-start:var(--t-spacing-2);
5441
5338
  --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
5442
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
5339
+ --tds-select-group-label-padding-inline:var(--t-spacing-half);
5443
5340
  --tds-select-group-label-font-size:var(--t-font-size-sm);
5444
5341
  --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
5445
5342
  --tds-select-group-label-letter-spacing:0;
@@ -5547,7 +5444,7 @@ a.tds-dropdown-item:is(:hover, :active){
5547
5444
  .tds-select :is(li[role="option"],option:not([hidden])){
5548
5445
  display:block;
5549
5446
  align-content:center;
5550
- min-height:var(--t-container-size-md);
5447
+ min-height:38px;
5551
5448
  padding-block:var(--tds-select-option-padding-block);
5552
5449
  padding-inline:var(--tds-select-option-padding-inline);
5553
5450
  overflow:hidden;
@@ -5662,11 +5559,9 @@ a.tds-dropdown-item:is(:hover, :active){
5662
5559
  pointer-events:none;
5663
5560
  opacity:0;
5664
5561
  }
5665
-
5666
5562
  .tds-select:has(> button){
5667
5563
  anchor-scope:--tds-select-anchor;
5668
5564
  }
5669
-
5670
5565
  .tds-select:has( > button) > button{
5671
5566
  display:block;
5672
5567
  padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
@@ -5679,7 +5574,6 @@ a.tds-dropdown-item:is(:hover, :active){
5679
5574
  transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
5680
5575
  -webkit-tap-highlight-color:transparent;
5681
5576
  }
5682
-
5683
5577
  :is(.tds-select:has( > button) > button)::after{
5684
5578
  position:absolute;
5685
5579
  inset-block:0;
@@ -5693,11 +5587,9 @@ a.tds-dropdown-item:is(:hover, :active){
5693
5587
  transform:rotate(0);
5694
5588
  transition:var(--tds-select-caret-transition);
5695
5589
  }
5696
-
5697
5590
  .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
5698
5591
  color:var(--tds-select-color);
5699
5592
  }
5700
-
5701
5593
  .tds-select:has( > button) [popover]{
5702
5594
  inset:auto;
5703
5595
  inline-size:-moz-max-content;
@@ -5726,18 +5618,15 @@ a.tds-dropdown-item:is(:hover, :active){
5726
5618
  translate:var(--tds-select-dropdown-open-translate);
5727
5619
  transition:var(--tds-select-dropdown-transition);
5728
5620
  }
5729
-
5730
5621
  :is(.tds-select:has( > button) [popover]):not(:popover-open){
5731
5622
  opacity:var(--tds-select-dropdown-closed-opacity);
5732
5623
  translate:var(--tds-select-dropdown-closed-translate);
5733
5624
  }
5734
-
5735
5625
  :is(.tds-select:has( > button) [popover]) ul{
5736
5626
  padding:0;
5737
5627
  margin:0;
5738
5628
  list-style:none;
5739
5629
  }
5740
-
5741
5630
  @starting-style{
5742
5631
  :is(.tds-select:has( > button) [popover]):popover-open{
5743
5632
  opacity:var(--tds-select-dropdown-closed-opacity);