@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.
- package/dist/componentRegistration.js +4 -0
- package/dist/componentRegistration.js.map +1 -1
- package/dist/components/DataTable/DataTable.d.ts +42 -2
- package/dist/components/DataTable/DataTable.d.ts.map +1 -1
- package/dist/components/DataTable/DataTable.js +109 -31
- package/dist/components/DataTable/DataTable.js.map +1 -1
- package/dist/components/DataTable/ResultsCount.d.ts +49 -0
- package/dist/components/DataTable/ResultsCount.d.ts.map +1 -0
- package/dist/components/DataTable/ResultsCount.js +76 -0
- package/dist/components/DataTable/ResultsCount.js.map +1 -0
- package/dist/components/DataTable/TableActions.d.ts +41 -0
- package/dist/components/DataTable/TableActions.d.ts.map +1 -0
- package/dist/components/DataTable/TableActions.js +47 -0
- package/dist/components/DataTable/TableActions.js.map +1 -0
- package/dist/components/button/BaseButton.d.ts.map +1 -1
- package/dist/components/button/BaseButton.js +20 -4
- package/dist/components/button/BaseButton.js.map +1 -1
- package/dist/components/combo-box/ComboBox.js +19 -19
- package/dist/components/combo-box/ComboBox.js.map +1 -1
- package/dist/components/internal/LoadingSpinner.js +2 -2
- package/dist/components/internal/LoadingSpinner.js.map +1 -1
- package/dist/components/internal/index.d.ts +2 -0
- package/dist/components/internal/index.d.ts.map +1 -1
- package/dist/components/internal/tooltip/Tooltip.d.ts +34 -0
- package/dist/components/internal/tooltip/Tooltip.d.ts.map +1 -0
- package/dist/components/internal/tooltip/TooltipTriggerContext.d.ts +7 -0
- package/dist/components/internal/tooltip/TooltipTriggerContext.d.ts.map +1 -0
- package/dist/components/internal/tooltip/TooltipTriggerContext.js +7 -0
- package/dist/components/internal/tooltip/TooltipTriggerContext.js.map +1 -0
- package/dist/components/internal/tooltip/index.d.ts +3 -0
- package/dist/components/internal/tooltip/index.d.ts.map +1 -0
- package/dist/components/link/IconLink.d.ts +1 -1
- package/dist/components/search-input/SearchInput.d.ts +40 -0
- package/dist/components/search-input/SearchInput.d.ts.map +1 -0
- package/dist/components/search-input/SearchInput.js +75 -0
- package/dist/components/search-input/SearchInput.js.map +1 -0
- package/dist/components/search-input/index.d.ts +4 -0
- package/dist/components/search-input/index.d.ts.map +1 -0
- package/dist/index.css +164 -275
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/reactRender.css +1491 -1516
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +1491 -1516
- package/dist/reactRenderLegacy.css.map +1 -1
- package/dist/unstable.css +2803 -2828
- package/dist/unstable.css.map +1 -1
- package/dist/unstable.js +1 -0
- package/dist/unstable.js.map +1 -1
- 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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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:
|
|
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);
|