draft-components 1.0.0-beta.5 → 1.0.0-beta.6

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 (2) hide show
  1. package/css/draft-components.css +1808 -1808
  2. package/package.json +3 -3
package/css/draft-components.css CHANGED
@@ -881,2628 +881,2628 @@
881
881
  stroke-linecap: round;
882
882
  }
883
883
 
884
- /* Forms */
884
+ /* Overlays */
885
885
 
886
- .dc-text-input__container {
887
- --dc-input-font-size: 14px;
888
- --dc-input-height: 36px;
889
- --dc-input-padding-x: 12px;
890
- --dc-input-border-radius: 6px;
891
- --dc-input-text-color: var(--dc-control-primary-text-color);
892
- --dc-input-border-color: var(--dc-control-border-color);
893
- --dc-input-border-color-error: var(--dc-control-error-color);
894
- --dc-input-bg: var(--dc-control-bg);
895
- --dc-input-prefix-color: var(--dc-control-secondary-text-color);
896
- --dc-input-suffix-color: var(--dc-control-secondary-text-color);
897
- --dc-input-focus-ring-color: var(--dc-control-primary-color);
886
+ .dc-tooltip {
887
+ --dc-tooltip-text-color: var(--dc-gray-50);
888
+ --dc-tooltip-bg: var(--dc-gray-700);
889
+ --dc-tooltip-transition-duration: 100ms;
898
890
 
899
891
  color-scheme: light;
900
- font-family: var(--dc-primary-font);
901
- font-size: var(--dc-input-font-size);
902
- font-weight: 400;
903
- line-height: 1;
904
- color: var(--dc-input-text-color);
905
- display: inline-flex;
906
- align-items: stretch;
892
+ font: var(--dc-text-xs);
893
+ color: var(--dc-tooltip-text-color);
894
+ z-index: var(--dc-overlay-z-index);
895
+ top: 0;
896
+ left: 0;
907
897
  box-sizing: border-box;
908
- height: var(--dc-input-height);
909
- max-width: 100%;
910
- vertical-align: middle;
911
- border: 1px solid var(--dc-input-border-color);
912
- border-radius: var(--dc-input-border-radius);
913
- background: var(--dc-input-bg);
914
- }
915
-
916
- .dc-text-input__container:focus-within {
917
- border-color: var(--dc-input-focus-ring-color);
918
- box-shadow: 0 0 0 1px var(--dc-input-focus-ring-color);
898
+ padding: 4px 8px;
899
+ border-radius: 6px;
900
+ background: var(--dc-tooltip-bg);
901
+ box-shadow: var(--dc-shadow-md);
919
902
  }
920
903
 
921
- .dc-text-input__container_disabled {
922
- opacity: var(--dc-disabled-state-opacity);
904
+ .dc-tooltip_hidden {
905
+ opacity: 0;
906
+ transition: opacity var(--dc-tooltip-transition-duration) ease;
923
907
  }
924
908
 
925
- .dc-text-input__container_has_error {
926
- border-color: var(--dc-input-border-color-error);
909
+ .dc-tooltip_visible {
910
+ opacity: 1;
927
911
  }
928
912
 
929
- .dc-text-input__container_block {
930
- display: flex;
931
- }
913
+ .dc-popover {
914
+ --dc-popover-text-color: var(--dc-primary-text-color);
915
+ --dc-popover-transition-duration: 100ms;
916
+ --dc-popover-bg: white;
917
+ --dc-popover-shadow:
918
+ 0 2px 0 -1px rgba(0, 0, 0, 0.075),
919
+ 0 0 0 1px var(--dc-gray-200),
920
+ var(--dc-shadow-lg);
932
921
 
933
- .dc-text-input__container_sm {
934
- --dc-input-font-size: 13px;
935
- --dc-input-height: 32px;
936
- --dc-input-padding-x: 8px;
937
- --dc-input-border-radius: 5px;
922
+ color-scheme: light;
923
+ z-index: var(--dc-overlay-z-index);
924
+ top: 0;
925
+ left: 0;
926
+ box-sizing: border-box;
927
+ padding: 1px;
938
928
  }
939
929
 
940
- .dc-text-input__container_lg {
941
- --dc-input-font-size: 15px;
942
- --dc-input-height: 40px;
943
- --dc-input-padding-x: 16px;
944
- --dc-input-border-radius: 7px;
930
+ .dc-popover-modal {
931
+ font: var(--dc-text-sm);
932
+ color: var(--dc-popover-text-color);
933
+ box-sizing: border-box;
934
+ max-width: 448px;
935
+ padding: 12px 16px;
936
+ border-radius: 8px;
937
+ background: var(--dc-popover-bg);
938
+ box-shadow: var(--dc-popover-shadow);
945
939
  }
946
940
 
947
- .dc-text-input {
948
- -webkit-appearance: none;
949
- -moz-appearance: none;
950
- appearance: none;
951
- font: inherit;
952
- color: inherit;
953
- flex: auto;
954
- min-width: 0;
955
- max-width: 100%;
956
- margin: 0;
957
- padding: 0 var(--dc-input-padding-x);
958
- border: none;
959
- background: none;
941
+ .dc-popover_closed .dc-popover-modal {
942
+ opacity: 0;
943
+ transform: scale(0.95);
944
+ transition: var(--dc-popover-transition-duration) ease;
945
+ transition-property: opacity, transform;
960
946
  }
961
947
 
962
- .dc-text-input::-moz-placeholder {
963
- color: inherit;
964
- opacity: 0.4;
948
+ .dc-popover_opened .dc-popover-modal {
949
+ opacity: 1;
950
+ transform: scale(1);
965
951
  }
966
952
 
967
- .dc-text-input::placeholder {
968
- color: inherit;
969
- opacity: 0.4;
953
+ .dc-popover[data-position="top-start"] .dc-popover-modal {
954
+ transform-origin: bottom left;
970
955
  }
971
956
 
972
- .dc-text-input:focus {
973
- outline: none;
957
+ .dc-popover[data-position="top-center"] .dc-popover-modal {
958
+ transform-origin: bottom center;
974
959
  }
975
960
 
976
- .dc-text-input_width_2ch {
977
- width: 2.5ch;
961
+ .dc-popover[data-position="top-right"] .dc-popover-modal {
962
+ transform-origin: bottom left;
978
963
  }
979
964
 
980
- .dc-text-input_width_3ch {
981
- width: 3.5ch;
965
+ .dc-popover[data-position="right-start"] .dc-popover-modal {
966
+ transform-origin: left top;
982
967
  }
983
968
 
984
- .dc-text-input_width_4ch {
985
- width: 4.5ch;
969
+ .dc-popover[data-position="right-center"] .dc-popover-modal {
970
+ transform-origin: left center;
986
971
  }
987
972
 
988
- .dc-text-input_width_5ch {
989
- width: 5.5ch;
973
+ .dc-popover[data-position="right-right"] .dc-popover-modal {
974
+ transform-origin: left bottom;
990
975
  }
991
976
 
992
- .dc-text-input_width_10ch {
993
- width: 10.5ch;
977
+ .dc-popover[data-position="bottom-start"] .dc-popover-modal {
978
+ transform-origin: top left;
994
979
  }
995
980
 
996
- .dc-text-input_width_20ch {
997
- width: 20.5ch;
981
+ .dc-popover[data-position="bottom-center"] .dc-popover-modal {
982
+ transform-origin: top center;
998
983
  }
999
984
 
1000
- .dc-text-input_width_40ch {
1001
- width: 40.5ch;
985
+ .dc-popover[data-position="bottom-right"] .dc-popover-modal {
986
+ transform-origin: top left;
1002
987
  }
1003
988
 
1004
- .dc-text-input__prefix,
1005
- .dc-text-input__suffix {
1006
- display: inline-flex;
1007
- flex: none;
1008
- align-items: center;
1009
- box-sizing: border-box;
989
+ .dc-popover[data-position="left-start"] .dc-popover-modal {
990
+ transform-origin: right top;
1010
991
  }
1011
992
 
1012
- .dc-text-input__prefix {
1013
- color: var(--dc-input-prefix-color);
993
+ .dc-popover[data-position="left-center"] .dc-popover-modal {
994
+ transform-origin: right center;
1014
995
  }
1015
996
 
1016
- .dc-text-input__suffix {
1017
- color: var(--dc-input-suffix-color);
997
+ .dc-popover[data-position="left-right"] .dc-popover-modal {
998
+ transform-origin: right bottom;
1018
999
  }
1019
1000
 
1020
- .dc-text-input__container_has_prefix {
1021
- padding-left: var(--dc-input-padding-x);
1022
- }
1001
+ .dc-dialog {
1002
+ --dc-dialog-max-width: 480px;
1003
+ --dc-dialog-safe-area: 16px;
1004
+ --dc-dialog-viewport-gap: 16px;
1005
+ --dc-dialog-transition-duration: 200ms;
1006
+ --dc-dialog-text-color: var(--dc-primary-text-color);
1007
+ --dc-dialog-border-color: transparent;
1008
+ --dc-dialog-bg: var(--dc-primary-bg);
1009
+ --dc-dialog-inset-shadow-color: var(--dc-border-color-transparent-2);
1010
+ --dc-dialog-backdrop-color: rgba(17, 24, 39, 0.4); /* gray-900 */
1023
1011
 
1024
- .dc-text-input__container_has_prefix .dc-text-input {
1025
- padding-left: calc(var(--dc-input-padding-x) * 0.5);
1012
+ color-scheme: light;
1013
+ position: relative;
1014
+ z-index: var(--dc-overlay-z-index);
1026
1015
  }
1027
1016
 
1028
- .dc-text-input__container_has_suffix {
1029
- padding-right: var(--dc-input-padding-x);
1017
+ .dc-dialog-backdrop {
1018
+ position: fixed;
1019
+ top: 0;
1020
+ left: 0;
1021
+ box-sizing: border-box;
1022
+ width: 100%;
1023
+ height: 100%;
1024
+ padding: var(--dc-dialog-viewport-gap);
1025
+ background: var(--dc-dialog-backdrop-color);
1030
1026
  }
1031
1027
 
1032
- .dc-text-input__container_has_suffix .dc-text-input {
1033
- padding-right: calc(var(--dc-input-padding-x) * 0.5);
1028
+ .dc-dialog_closed .dc-dialog-backdrop {
1029
+ opacity: 0;
1030
+ transition: opacity var(--dc-dialog-transition-duration) linear;
1034
1031
  }
1035
1032
 
1036
- .dc-password-input {
1037
- --dc-password-input-switch-color: var(--dc-control-secondary-text-color);
1038
- --dc-password-input-switch-color-hover: var(--dc-control-primary-text-color);
1039
- --dc-password-input-switch-bg: transparent;
1040
- --dc-password-input-switch-bg-hover: var(--dc-bg-transparent-2);
1041
-
1042
- color-scheme: light;
1043
- padding-right: 0;
1033
+ .dc-dialog_opened .dc-dialog-backdrop {
1034
+ opacity: 1;
1044
1035
  }
1045
1036
 
1046
- .dc-password-input__btn {
1047
- -webkit-appearance: none;
1048
- -moz-appearance: none;
1049
- appearance: none;
1050
- color: inherit;
1051
- display: inline-flex;
1052
- flex-shrink: 0;
1053
- align-items: center;
1054
- justify-content: center;
1037
+ .dc-dialog-modal {
1038
+ color: var(--dc-dialog-text-color);
1039
+ position: fixed;
1040
+ top: 50%;
1041
+ left: 50%;
1042
+ display: flex;
1043
+ flex-direction: column;
1055
1044
  box-sizing: border-box;
1056
- width: var(--dc-input-height);
1057
- height: 100%;
1058
- padding: 0;
1059
- border: none;
1060
- border-radius: calc(var(--dc-input-border-radius) - 1px);
1061
- background: var(--dc-password-input-switch-bg);
1045
+ width: 100%;
1046
+ max-width: calc(var(--dc-dialog-max-width) + 2 * var(--dc-dialog-safe-area));
1047
+ max-height: calc(100% - 2 * var(--dc-dialog-viewport-gap));
1048
+ transform: translate(-50%, -50%);
1049
+ border-radius: 12px;
1050
+ background: var(--dc-dialog-bg);
1051
+ box-shadow: var(--dc-shadow-xl);
1062
1052
  }
1063
1053
 
1064
- .dc-password-input__btn:focus,
1065
- .dc-password-input__btn:hover {
1066
- color: var(--dc-password-input-switch-color-hover);
1067
- cursor: pointer;
1068
- outline: none;
1069
- background: var(--dc-password-input-switch-bg-hover);
1054
+ .dc-dialog-modal_sm {
1055
+ --dc-dialog-max-width: 320px;
1070
1056
  }
1071
1057
 
1072
- .dc-password-input__btn:focus:not(:focus-visible, :hover) {
1073
- color: var(--dc-password-input-switch-color);
1074
- background: var(--dc-password-input-switch-bg);
1058
+ .dc-dialog-modal_lg {
1059
+ --dc-dialog-max-width: 640px;
1075
1060
  }
1076
1061
 
1077
- .dc-password-input__icon {
1078
- width: calc(var(--dc-input-height) * 0.5);
1079
- height: calc(var(--dc-input-height) * 0.5);
1080
- stroke-width: 2;
1062
+ .dc-dialog_closed .dc-dialog-modal {
1063
+ opacity: 0;
1064
+ transform: translate(-50%, -50%) scale(0.95);
1065
+ transition: var(--dc-dialog-transition-duration) ease;
1066
+ transition-property: opacity, transform;
1081
1067
  }
1082
1068
 
1083
- .dc-textarea__container {
1084
- --dc-textarea-font-size: 14px;
1085
- --dc-textarea-leading: 20px;
1086
- --dc-textarea-padding-y: 8px;
1087
- --dc-textarea-padding-x: 12px;
1088
- --dc-textarea-radius: 6px;
1089
- --dc-textarea-text-color: var(--dc-primary-text-color);
1090
- --dc-textarea-border-color: var(--dc-control-border-color);
1091
- --dc-textarea-border-color-error: var(--dc-control-error-color);
1092
- --dc-textarea-bg: var(--dc-control-bg);
1093
- --dc-textarea-focus-ring-color: var(--dc-control-primary-color);
1094
-
1095
- color-scheme: light;
1096
- font-family: var(--dc-primary-font);
1097
- display: inline-flex;
1098
- flex-direction: column;
1099
- box-sizing: border-box;
1100
- width: auto;
1101
- min-width: 0;
1102
- max-width: 100%;
1103
- border: 1px solid var(--dc-textarea-border-color);
1104
- border-radius: var(--dc-textarea-radius);
1105
- background: var(--dc-textarea-bg);
1069
+ .dc-dialog_opened .dc-dialog-modal {
1070
+ opacity: 1;
1071
+ transform: translate(-50%, -50%) scale(1);
1106
1072
  }
1107
1073
 
1108
- .dc-textarea__container:focus-within {
1109
- border-color: var(--dc-textarea-focus-ring-color);
1110
- outline: none;
1111
- box-shadow: 0 0 0 1px var(--dc-textarea-focus-ring-color);
1074
+ .dc-dialog-header,
1075
+ .dc-dialog-body,
1076
+ .dc-dialog-footer {
1077
+ padding: calc(var(--dc-dialog-safe-area) / 2) var(--dc-dialog-safe-area);
1112
1078
  }
1113
1079
 
1114
- .dc-textarea__container_disabled {
1115
- opacity: var(--dc-disabled-state-opacity);
1080
+ .dc-dialog-header {
1081
+ font: var(--dc-text-sm);
1116
1082
  }
1117
1083
 
1118
- .dc-textarea__container_has_error {
1119
- border-color: var(--dc-textarea-border-color-error);
1084
+ .dc-dialog-header__title-bar {
1085
+ position: relative;
1086
+ padding-right: 24px;
1120
1087
  }
1121
1088
 
1122
- .dc-textarea__container_block {
1123
- width: 100%;
1089
+ .dc-dialog-header__heading {
1090
+ font: 700 var(--dc-text-md);
1091
+ margin: 0;
1124
1092
  }
1125
1093
 
1126
- .dc-textarea__container_size_sm {
1127
- --dc-textarea-font-size: 13px;
1128
- --dc-textarea-leading: 16px;
1129
- --dc-textarea-padding-y: 8px;
1130
- --dc-textarea-padding-x: 8px;
1131
- --dc-textarea-radius: 5px;
1094
+ .dc-dialog-header__close-btn {
1095
+ position: absolute;
1096
+ top: -8px;
1097
+ right: -8px;
1098
+ width: 32px;
1099
+ height: 32px;
1132
1100
  }
1133
1101
 
1134
- .dc-textarea__container_size_lg {
1135
- --dc-textarea-font-size: 15px;
1136
- --dc-textarea-leading: 24px;
1137
- --dc-textarea-padding-y: 12px;
1138
- --dc-textarea-padding-x: 16px;
1139
- --dc-textarea-radius: 7px;
1102
+ .dc-dialog-header__subheading,
1103
+ .dc-dialog-header__body {
1140
1104
  }
1141
1105
 
1142
- .dc-textarea {
1143
- -webkit-appearance: none;
1144
- -moz-appearance: none;
1145
- appearance: none;
1146
- font-family: inherit;
1147
- font-size: var(--dc-textarea-font-size);
1148
- line-height: var(--dc-textarea-leading);
1149
- color: var(--dc-textarea-text-color);
1150
- min-width: 192px;
1151
- min-height: var(--dc-textarea-leading);
1152
- padding: var(--dc-textarea-padding-y) var(--dc-textarea-padding-x);
1153
- border: none;
1154
- background: none;
1106
+ .dc-dialog-body {
1107
+ position: relative;
1108
+ overflow: auto;
1109
+ -webkit-overflow-scrolling: touch;
1110
+ flex-grow: 1;
1111
+ padding-top: var(--dc-dialog-safe-area);
1112
+ padding-bottom: var(--dc-dialog-safe-area);
1155
1113
  }
1156
1114
 
1157
- .dc-textarea::-moz-placeholder {
1158
- color: inherit;
1159
- opacity: 0.4;
1115
+ .dc-dialog-body_scroll-shadow-top {
1116
+ box-shadow: inset 0 1px 1px var(--dc-dialog-inset-shadow-color);
1160
1117
  }
1161
1118
 
1162
- .dc-textarea::placeholder {
1163
- color: inherit;
1164
- opacity: 0.4;
1119
+ .dc-dialog-body_scroll-shadow-bottom {
1120
+ box-shadow: inset 0 -1px 1px var(--dc-dialog-inset-shadow-color);
1165
1121
  }
1166
1122
 
1167
- .dc-textarea:focus {
1168
- outline: none;
1123
+ .dc-dialog-body_scroll-shadow-top.dc-dialog-body_scroll-shadow-bottom {
1124
+ box-shadow:
1125
+ inset 0 1px 0 var(--dc-dialog-inset-shadow-color),
1126
+ inset 0 -1px 0 var(--dc-dialog-inset-shadow-color);
1169
1127
  }
1170
1128
 
1171
- .dc-textarea_width_30ch {
1172
- width: 30.5ch;
1129
+ .dc-dialog-footer {
1130
+ display: flex;
1131
+ flex-wrap: wrap;
1132
+ align-items: center;
1133
+ justify-content: flex-end;
1173
1134
  }
1174
1135
 
1175
- .dc-textarea_width_40ch {
1176
- width: 40.5ch;
1136
+ .dc-dialog-footer > * + * {
1137
+ margin-left: 8px;
1177
1138
  }
1178
1139
 
1179
- .dc-textarea_width_60ch {
1180
- width: 60.5ch;
1140
+ .dc-dialog-modal > .dc-dialog-header:first-child,
1141
+ .dc-dialog-modal > .dc-dialog-body:first-child,
1142
+ .dc-dialog-modal > .dc-dialog-footer:first-child {
1143
+ padding-top: var(--dc-dialog-safe-area);
1144
+ border-top-left-radius: inherit;
1145
+ border-top-right-radius: inherit;
1181
1146
  }
1182
1147
 
1183
- .dc-textarea_width_80ch {
1184
- width: 80.5ch;
1148
+ .dc-dialog-modal > .dc-dialog-header:last-child,
1149
+ .dc-dialog-modal > .dc-dialog-body:last-child,
1150
+ .dc-dialog-modal > .dc-dialog-footer:last-child {
1151
+ padding-bottom: var(--dc-dialog-safe-area);
1152
+ border-bottom-right-radius: inherit;
1153
+ border-bottom-left-radius: inherit;
1185
1154
  }
1186
1155
 
1187
- .dc-textarea__character-count {
1188
- display: block;
1189
- padding: 8px var(--dc-textarea-padding-x);
1190
- border-top: 1px dashed var(--dc-textarea-border-color);
1191
- }
1156
+ /* Forms */
1192
1157
 
1193
- .dc-select__container {
1194
- --dc-select-font-size: 14px;
1195
- --dc-select-text-color: var(--dc-control-primary-text-color);
1196
- --dc-select-height: 36px;
1197
- --dc-select-arrow-size: 20px;
1198
- --dc-select-padding-x: 12px;
1199
- --dc-select-radius: 6px;
1200
- --dc-select-border-color: var(--dc-control-border-color);
1201
- --dc-select-border-color-error: var(--dc-control-error-color);
1202
- --dc-select-bg: var(--dc-control-bg);
1203
- --dc-select-focus-ring-color: var(--dc-control-primary-color);
1158
+ .dc-text-input__container {
1159
+ --dc-input-font-size: 14px;
1160
+ --dc-input-height: 36px;
1161
+ --dc-input-padding-x: 12px;
1162
+ --dc-input-border-radius: 6px;
1163
+ --dc-input-text-color: var(--dc-control-primary-text-color);
1164
+ --dc-input-border-color: var(--dc-control-border-color);
1165
+ --dc-input-border-color-error: var(--dc-control-error-color);
1166
+ --dc-input-bg: var(--dc-control-bg);
1167
+ --dc-input-prefix-color: var(--dc-control-secondary-text-color);
1168
+ --dc-input-suffix-color: var(--dc-control-secondary-text-color);
1169
+ --dc-input-focus-ring-color: var(--dc-control-primary-color);
1204
1170
 
1205
1171
  color-scheme: light;
1206
1172
  font-family: var(--dc-primary-font);
1207
- font-size: var(--dc-select-font-size);
1173
+ font-size: var(--dc-input-font-size);
1208
1174
  font-weight: 400;
1209
1175
  line-height: 1;
1210
- color: var(--dc-select-text-color);
1211
- position: relative;
1176
+ color: var(--dc-input-text-color);
1212
1177
  display: inline-flex;
1213
1178
  align-items: stretch;
1214
1179
  box-sizing: border-box;
1215
- height: var(--dc-select-height);
1180
+ height: var(--dc-input-height);
1216
1181
  max-width: 100%;
1217
1182
  vertical-align: middle;
1218
- border: 1px solid var(--dc-select-border-color);
1219
- border-radius: var(--dc-select-radius);
1220
- background: var(--dc-select-bg);
1221
- }
1222
-
1223
- .dc-select__container:focus-within {
1224
- border-color: var(--dc-select-focus-ring-color);
1225
- box-shadow: 0 0 0 1px var(--dc-select-focus-ring-color);
1183
+ border: 1px solid var(--dc-input-border-color);
1184
+ border-radius: var(--dc-input-border-radius);
1185
+ background: var(--dc-input-bg);
1226
1186
  }
1227
1187
 
1228
- .dc-select__container_multiple {
1229
- overflow: hidden;
1230
- height: initial;
1188
+ .dc-text-input__container:focus-within {
1189
+ border-color: var(--dc-input-focus-ring-color);
1190
+ box-shadow: 0 0 0 1px var(--dc-input-focus-ring-color);
1231
1191
  }
1232
1192
 
1233
- .dc-select__container_disabled {
1193
+ .dc-text-input__container_disabled {
1234
1194
  opacity: var(--dc-disabled-state-opacity);
1235
1195
  }
1236
1196
 
1237
- .dc-select__container_has_error {
1238
- border-color: var(--dc-select-border-color-error);
1197
+ .dc-text-input__container_has_error {
1198
+ border-color: var(--dc-input-border-color-error);
1239
1199
  }
1240
1200
 
1241
- .dc-select__container_block {
1242
- width: 100%;
1201
+ .dc-text-input__container_block {
1202
+ display: flex;
1243
1203
  }
1244
1204
 
1245
- .dc-select__container_sm {
1246
- --dc-select-font-size: 13px;
1247
- --dc-select-height: 32px;
1248
- --dc-select-padding-x: 8px;
1249
- --dc-select-radius: 5px;
1250
- --dc-select-arrow-size: 16px;
1205
+ .dc-text-input__container_sm {
1206
+ --dc-input-font-size: 13px;
1207
+ --dc-input-height: 32px;
1208
+ --dc-input-padding-x: 8px;
1209
+ --dc-input-border-radius: 5px;
1251
1210
  }
1252
1211
 
1253
- .dc-select__container_lg {
1254
- --dc-select-font-size: 15px;
1255
- --dc-select-height: 40px;
1256
- --dc-select-padding-x: 16px;
1257
- --dc-select-radius: 7px;
1258
- --dc-select-arrow-size: 20px;
1212
+ .dc-text-input__container_lg {
1213
+ --dc-input-font-size: 15px;
1214
+ --dc-input-height: 40px;
1215
+ --dc-input-padding-x: 16px;
1216
+ --dc-input-border-radius: 7px;
1259
1217
  }
1260
1218
 
1261
- .dc-select {
1219
+ .dc-text-input {
1262
1220
  -webkit-appearance: none;
1263
1221
  -moz-appearance: none;
1264
1222
  appearance: none;
1265
1223
  font: inherit;
1266
1224
  color: inherit;
1267
- width: 100%;
1268
- padding-right: calc(var(--dc-select-arrow-size) + var(--dc-select-padding-x));
1269
- padding-left: var(--dc-select-padding-x);
1270
- text-transform: none;
1225
+ flex: auto;
1226
+ min-width: 0;
1227
+ max-width: 100%;
1228
+ margin: 0;
1229
+ padding: 0 var(--dc-input-padding-x);
1271
1230
  border: none;
1272
1231
  background: none;
1273
1232
  }
1274
1233
 
1275
- .dc-select__container_multiple .dc-select {
1276
- margin-top: var(--dc-select-radius);
1277
- margin-bottom: var(--dc-select-radius);
1278
- padding: 0;
1234
+ .dc-text-input::-moz-placeholder {
1235
+ color: inherit;
1236
+ opacity: 0.4;
1279
1237
  }
1280
1238
 
1281
- .dc-select:focus {
1239
+ .dc-text-input::placeholder {
1240
+ color: inherit;
1241
+ opacity: 0.4;
1242
+ }
1243
+
1244
+ .dc-text-input:focus {
1282
1245
  outline: none;
1283
1246
  }
1284
1247
 
1285
- .dc-select:not(:disabled):hover {
1286
- cursor: pointer;
1248
+ .dc-text-input_width_2ch {
1249
+ width: 2.5ch;
1287
1250
  }
1288
1251
 
1289
- .dc-select__icon {
1290
- position: absolute;
1291
- top: calc((var(--dc-select-height) - var(--dc-select-arrow-size)) / 2);
1292
- right: calc(var(--dc-select-padding-x) / 2);
1293
- width: var(--dc-select-arrow-size);
1294
- height: var(--dc-select-arrow-size);
1295
- pointer-events: none;
1252
+ .dc-text-input_width_3ch {
1253
+ width: 3.5ch;
1296
1254
  }
1297
1255
 
1298
- .dc-select__container_multiple .dc-select__icon {
1299
- display: none;
1256
+ .dc-text-input_width_4ch {
1257
+ width: 4.5ch;
1300
1258
  }
1301
1259
 
1302
- .dc-switch {
1303
- --dc-switch-width: 38px;
1304
- --dc-switch-height: 24px;
1305
- --dc-switch-radius: calc(var(--dc-switch-height) / 2);
1306
- --dc-switch-track-bg: var(--dc-control-bg-inset);
1307
- --dc-switch-track-bg-checked: var(--dc-control-primary-color);
1308
- --dc-switch-thumb-size: calc(var(--dc-switch-height) - var(--dc-switch-thumb-offset) * 2);
1309
- --dc-switch-thumb-offset: 2px;
1310
- --dc-switch-thumb-bg: var(--dc-control-on-primary-color);
1311
- --dc-switch-icon-color: var(--dc-control-primary-color);
1312
- --dc-switch-focus-ring-color: var(--dc-focus-ring-color);
1260
+ .dc-text-input_width_5ch {
1261
+ width: 5.5ch;
1262
+ }
1313
1263
 
1314
- color-scheme: light;
1264
+ .dc-text-input_width_10ch {
1265
+ width: 10.5ch;
1315
1266
  }
1316
1267
 
1317
- .dc-switch__input {
1318
- -webkit-appearance: none;
1319
- -moz-appearance: none;
1320
- appearance: none;
1321
- position: absolute;
1268
+ .dc-text-input_width_20ch {
1269
+ width: 20.5ch;
1322
1270
  }
1323
1271
 
1324
- .dc-switch__track {
1325
- font-size: 16px;
1326
- position: relative;
1327
- display: inline-flex;
1328
- cursor: pointer;
1329
- flex: none;
1330
- box-sizing: border-box;
1331
- width: var(--dc-switch-width);
1332
- height: var(--dc-switch-height);
1333
- transition-duration: 0.2s;
1334
- transition-property: opacity, background-color;
1335
- vertical-align: middle;
1336
- border-radius: var(--dc-switch-radius);
1337
- background: var(--dc-switch-track-bg);
1272
+ .dc-text-input_width_40ch {
1273
+ width: 40.5ch;
1338
1274
  }
1339
1275
 
1340
- .dc-switch__thumb {
1341
- position: absolute;
1342
- top: 0;
1343
- left: 0;
1276
+ .dc-text-input__prefix,
1277
+ .dc-text-input__suffix {
1344
1278
  display: inline-flex;
1279
+ flex: none;
1345
1280
  align-items: center;
1346
- justify-content: center;
1347
- width: var(--dc-switch-thumb-size);
1348
- height: var(--dc-switch-thumb-size);
1349
- transform:
1350
- translateX(var(--dc-switch-thumb-offset))
1351
- translateY(var(--dc-switch-thumb-offset));
1352
- transition: transform 0.2s;
1353
- border-radius: 50%;
1354
- background: var(--dc-switch-thumb-bg);
1355
- box-shadow:
1356
- 0 1px 3px 0 rgba(0, 0, 0, 0.1),
1357
- 0 4px 6px -1px rgba(0, 0, 0, 0.1),
1358
- 0 2px 4px -1px rgba(0, 0, 0, 0.06);
1359
- }
1360
-
1361
- .dc-switch__icon {
1362
- color: var(--dc-switch-icon-color);
1363
- opacity: 0;
1364
- transition: opacity 0.2s;
1365
- }
1366
-
1367
- .dc-switch__input:checked + .dc-switch__track {
1368
- background: var(--dc-switch-track-bg-checked);
1281
+ box-sizing: border-box;
1369
1282
  }
1370
1283
 
1371
- .dc-switch__input:checked + .dc-switch__track .dc-switch__thumb {
1372
- transform:
1373
- translateX(
1374
- calc(
1375
- var(--dc-switch-width) -
1376
- var(--dc-switch-thumb-size) -
1377
- var(--dc-switch-thumb-offset)
1378
- )
1379
- )
1380
- translateY(var(--dc-switch-thumb-offset));
1284
+ .dc-text-input__prefix {
1285
+ color: var(--dc-input-prefix-color);
1381
1286
  }
1382
1287
 
1383
- .dc-switch__input:checked + .dc-switch__track .dc-switch__icon {
1384
- opacity: 1;
1288
+ .dc-text-input__suffix {
1289
+ color: var(--dc-input-suffix-color);
1385
1290
  }
1386
1291
 
1387
- .dc-switch__input:disabled + .dc-switch__track {
1388
- opacity: var(--dc-disabled-state-opacity);
1389
- cursor: default;
1292
+ .dc-text-input__container_has_prefix {
1293
+ padding-left: var(--dc-input-padding-x);
1390
1294
  }
1391
1295
 
1392
- .dc-switch__input:focus {
1393
- outline: none;
1296
+ .dc-text-input__container_has_prefix .dc-text-input {
1297
+ padding-left: calc(var(--dc-input-padding-x) * 0.5);
1394
1298
  }
1395
1299
 
1396
- .dc-switch__input:focus + .dc-switch__track::after {
1397
- content: "";
1398
- position: absolute;
1399
- z-index: -1;
1400
- inset: -3px;
1401
- border-radius: calc(3px + var(--dc-switch-radius));
1402
- box-shadow: 0 0 0 3px var(--dc-switch-focus-ring-color);
1300
+ .dc-text-input__container_has_suffix {
1301
+ padding-right: var(--dc-input-padding-x);
1403
1302
  }
1404
1303
 
1405
- .dc-switch__input:focus:not(:focus-visible) + .dc-switch__track::after {
1406
- content: none;
1304
+ .dc-text-input__container_has_suffix .dc-text-input {
1305
+ padding-right: calc(var(--dc-input-padding-x) * 0.5);
1407
1306
  }
1408
1307
 
1409
- .dc-checkbox {
1410
- --dc-checkbox-size: 20px;
1411
- --dc-checkbox-radius: 6px;
1412
- --dc-checkbox-bg: var(--dc-control-bg);
1413
- --dc-checkbox-bg-checked: var(--dc-control-primary-color);
1414
- --dc-checkbox-border-color: var(--dc-control-border-color);
1415
- --dc-checkbox-border-color-checked: var(--dc-control-primary-color);
1416
- --dc-checkbox-icon-color: var(--dc-control-on-primary-color);
1417
- --dc-checkbox-focus-ring-color: var(--dc-focus-ring-color);
1308
+ .dc-password-input {
1309
+ --dc-password-input-switch-color: var(--dc-control-secondary-text-color);
1310
+ --dc-password-input-switch-color-hover: var(--dc-control-primary-text-color);
1311
+ --dc-password-input-switch-bg: transparent;
1312
+ --dc-password-input-switch-bg-hover: var(--dc-bg-transparent-2);
1418
1313
 
1419
1314
  color-scheme: light;
1315
+ padding-right: 0;
1420
1316
  }
1421
1317
 
1422
- .dc-checkbox__input {
1318
+ .dc-password-input__btn {
1423
1319
  -webkit-appearance: none;
1424
1320
  -moz-appearance: none;
1425
1321
  appearance: none;
1426
- position: absolute;
1427
- }
1428
-
1429
- .dc-checkbox__check {
1430
- font-size: 16px;
1431
- position: relative;
1322
+ color: inherit;
1432
1323
  display: inline-flex;
1433
- cursor: pointer;
1434
- flex: none;
1324
+ flex-shrink: 0;
1435
1325
  align-items: center;
1436
1326
  justify-content: center;
1437
1327
  box-sizing: border-box;
1438
- width: var(--dc-checkbox-size);
1439
- height: var(--dc-checkbox-size);
1440
- transition: opacity 0.2s;
1441
- vertical-align: middle;
1442
- border: 1px solid var(--dc-checkbox-border-color);
1443
- border-radius: var(--dc-checkbox-radius);
1444
- background: var(--dc-checkbox-bg);
1328
+ width: var(--dc-input-height);
1329
+ height: 100%;
1330
+ padding: 0;
1331
+ border: none;
1332
+ border-radius: calc(var(--dc-input-border-radius) - 1px);
1333
+ background: var(--dc-password-input-switch-bg);
1445
1334
  }
1446
1335
 
1447
- .dc-checkbox__icon {
1448
- color: var(--dc-checkbox-icon-color);
1449
- display: none;
1336
+ .dc-password-input__btn:focus,
1337
+ .dc-password-input__btn:hover {
1338
+ color: var(--dc-password-input-switch-color-hover);
1339
+ cursor: pointer;
1340
+ outline: none;
1341
+ background: var(--dc-password-input-switch-bg-hover);
1450
1342
  }
1451
1343
 
1452
- .dc-checkbox__input:checked + .dc-checkbox__check {
1453
- border-color: var(--dc-checkbox-border-color-checked);
1454
- background: var(--dc-checkbox-bg-checked);
1344
+ .dc-password-input__btn:focus:not(:focus-visible, :hover) {
1345
+ color: var(--dc-password-input-switch-color);
1346
+ background: var(--dc-password-input-switch-bg);
1455
1347
  }
1456
1348
 
1457
- .dc-checkbox__input:checked + .dc-checkbox__check .dc-checkbox__icon {
1458
- display: initial;
1349
+ .dc-password-input__icon {
1350
+ width: calc(var(--dc-input-height) * 0.5);
1351
+ height: calc(var(--dc-input-height) * 0.5);
1352
+ stroke-width: 2;
1459
1353
  }
1460
1354
 
1461
- .dc-checkbox__input:disabled + .dc-checkbox__check {
1462
- opacity: var(--dc-disabled-state-opacity);
1463
- cursor: default;
1355
+ .dc-textarea__container {
1356
+ --dc-textarea-font-size: 14px;
1357
+ --dc-textarea-leading: 20px;
1358
+ --dc-textarea-padding-y: 8px;
1359
+ --dc-textarea-padding-x: 12px;
1360
+ --dc-textarea-radius: 6px;
1361
+ --dc-textarea-text-color: var(--dc-primary-text-color);
1362
+ --dc-textarea-border-color: var(--dc-control-border-color);
1363
+ --dc-textarea-border-color-error: var(--dc-control-error-color);
1364
+ --dc-textarea-bg: var(--dc-control-bg);
1365
+ --dc-textarea-focus-ring-color: var(--dc-control-primary-color);
1366
+
1367
+ color-scheme: light;
1368
+ font-family: var(--dc-primary-font);
1369
+ display: inline-flex;
1370
+ flex-direction: column;
1371
+ box-sizing: border-box;
1372
+ width: auto;
1373
+ min-width: 0;
1374
+ max-width: 100%;
1375
+ border: 1px solid var(--dc-textarea-border-color);
1376
+ border-radius: var(--dc-textarea-radius);
1377
+ background: var(--dc-textarea-bg);
1464
1378
  }
1465
1379
 
1466
- .dc-checkbox__input:focus {
1380
+ .dc-textarea__container:focus-within {
1381
+ border-color: var(--dc-textarea-focus-ring-color);
1467
1382
  outline: none;
1383
+ box-shadow: 0 0 0 1px var(--dc-textarea-focus-ring-color);
1468
1384
  }
1469
1385
 
1470
- .dc-checkbox__input:focus + .dc-checkbox__check::after {
1471
- content: "";
1472
- position: absolute;
1473
- z-index: -1;
1474
- inset: -3px;
1475
- border-radius: calc(3px + var(--dc-checkbox-radius));
1476
- box-shadow: 0 0 0 3px var(--dc-checkbox-focus-ring-color);
1386
+ .dc-textarea__container_disabled {
1387
+ opacity: var(--dc-disabled-state-opacity);
1477
1388
  }
1478
1389
 
1479
- .dc-checkbox__input:focus:not(:focus-visible) + .dc-checkbox__check::after {
1480
- content: none;
1390
+ .dc-textarea__container_has_error {
1391
+ border-color: var(--dc-textarea-border-color-error);
1481
1392
  }
1482
1393
 
1483
- .dc-radio {
1484
- --dc-radio-size: 20px;
1485
- --dc-radio-color-bg: var(--dc-control-bg);
1486
- --dc-radio-color-bg-checked: var(--dc-control-primary-color);
1487
- --dc-radio-color-border: var(--dc-control-border-color);
1488
- --dc-radio-color-border-checked: var(--dc-control-primary-color);
1489
- --dc-radio-color-icon: var(--dc-control-on-primary-color);
1490
- --dc-radio-color-focus-ring: var(--dc-focus-ring-color);
1394
+ .dc-textarea__container_block {
1395
+ width: 100%;
1396
+ }
1491
1397
 
1492
- color-scheme: light;
1398
+ .dc-textarea__container_size_sm {
1399
+ --dc-textarea-font-size: 13px;
1400
+ --dc-textarea-leading: 16px;
1401
+ --dc-textarea-padding-y: 8px;
1402
+ --dc-textarea-padding-x: 8px;
1403
+ --dc-textarea-radius: 5px;
1493
1404
  }
1494
1405
 
1495
- .dc-radio__input {
1406
+ .dc-textarea__container_size_lg {
1407
+ --dc-textarea-font-size: 15px;
1408
+ --dc-textarea-leading: 24px;
1409
+ --dc-textarea-padding-y: 12px;
1410
+ --dc-textarea-padding-x: 16px;
1411
+ --dc-textarea-radius: 7px;
1412
+ }
1413
+
1414
+ .dc-textarea {
1496
1415
  -webkit-appearance: none;
1497
1416
  -moz-appearance: none;
1498
1417
  appearance: none;
1499
- position: absolute;
1500
- }
1501
-
1502
- .dc-radio__check {
1503
- font-size: 16px;
1504
- position: relative;
1505
- display: inline-flex;
1506
- cursor: pointer;
1507
- flex: none;
1508
- align-items: center;
1509
- justify-content: center;
1510
- box-sizing: border-box;
1511
- width: var(--dc-radio-size);
1512
- height: var(--dc-radio-size);
1513
- transition: opacity 0.2s;
1514
- vertical-align: middle;
1515
- border: 1px solid var(--dc-radio-color-border);
1516
- border-radius: 50%;
1517
- background: var(--dc-radio-color-bg);
1418
+ font-family: inherit;
1419
+ font-size: var(--dc-textarea-font-size);
1420
+ line-height: var(--dc-textarea-leading);
1421
+ color: var(--dc-textarea-text-color);
1422
+ min-width: 192px;
1423
+ min-height: var(--dc-textarea-leading);
1424
+ padding: var(--dc-textarea-padding-y) var(--dc-textarea-padding-x);
1425
+ border: none;
1426
+ background: none;
1518
1427
  }
1519
1428
 
1520
- .dc-radio__icon {
1521
- color: var(--dc-radio-color-icon);
1522
- display: none;
1429
+ .dc-textarea::-moz-placeholder {
1430
+ color: inherit;
1431
+ opacity: 0.4;
1523
1432
  }
1524
1433
 
1525
- .dc-radio__input:checked + .dc-radio__check {
1526
- border-color: var(--dc-radio-color-border-checked);
1527
- background: var(--dc-radio-color-bg-checked);
1434
+ .dc-textarea::placeholder {
1435
+ color: inherit;
1436
+ opacity: 0.4;
1528
1437
  }
1529
1438
 
1530
- .dc-radio__input:checked + .dc-radio__check .dc-radio__icon {
1531
- display: initial;
1439
+ .dc-textarea:focus {
1440
+ outline: none;
1532
1441
  }
1533
1442
 
1534
- .dc-radio__input:disabled + .dc-radio__check {
1535
- opacity: var(--dc-disabled-state-opacity);
1536
- cursor: default;
1443
+ .dc-textarea_width_30ch {
1444
+ width: 30.5ch;
1537
1445
  }
1538
1446
 
1539
- .dc-radio__input:focus {
1540
- outline: none;
1447
+ .dc-textarea_width_40ch {
1448
+ width: 40.5ch;
1541
1449
  }
1542
1450
 
1543
- .dc-radio__input:focus + .dc-radio__check::after {
1544
- content: "";
1545
- position: absolute;
1546
- z-index: -1;
1547
- inset: -3px;
1548
- border-radius: 50%;
1549
- box-shadow: 0 0 0 3px var(--dc-radio-color-focus-ring);
1451
+ .dc-textarea_width_60ch {
1452
+ width: 60.5ch;
1550
1453
  }
1551
1454
 
1552
- .dc-radio__input:focus:not(:focus-visible) + .dc-radio__check::after {
1553
- content: none;
1455
+ .dc-textarea_width_80ch {
1456
+ width: 80.5ch;
1554
1457
  }
1555
1458
 
1556
- .dc-slider {
1557
- --dc-slider-track-height: 4px;
1558
- --dc-slider-track-bg: var(--dc-control-bg-inset);
1559
- --dc-slider-track-bg-fill: var(--dc-control-primary-color);
1560
- --dc-slider-tick-color: var(--dc-control-border-color);
1561
- --dc-slider-tick-label-color: var(--dc-control-secondary-text-color);
1562
- --dc-slider-focus-ring-color: var(--dc-focus-ring-color);
1459
+ .dc-textarea__character-count {
1460
+ display: block;
1461
+ padding: 8px var(--dc-textarea-padding-x);
1462
+ border-top: 1px dashed var(--dc-textarea-border-color);
1463
+ }
1563
1464
 
1564
- /* Thumb properties */
1565
- --dc-slider-thumb-width: 20px;
1566
- --dc-slider-thumb-height: 20px;
1567
- --dc-slider-thumb-bg: var(--dc-control-on-primary-color);
1568
- --dc-slider-thumb-shadow:
1569
- 0 0 0 1px rgba(0, 0, 0, 0.1),
1570
- 0 2px 3px rgba(0, 0, 0, 0.2);
1571
- --dc-slider-thumb-shadow-focus:
1572
- var(--dc-slider-thumb-shadow),
1573
- 0 0 0 3px var(--dc-slider-focus-ring-color);
1465
+ .dc-select__container {
1466
+ --dc-select-font-size: 14px;
1467
+ --dc-select-text-color: var(--dc-control-primary-text-color);
1468
+ --dc-select-height: 36px;
1469
+ --dc-select-arrow-size: 20px;
1470
+ --dc-select-padding-x: 12px;
1471
+ --dc-select-radius: 6px;
1472
+ --dc-select-border-color: var(--dc-control-border-color);
1473
+ --dc-select-border-color-error: var(--dc-control-error-color);
1474
+ --dc-select-bg: var(--dc-control-bg);
1475
+ --dc-select-focus-ring-color: var(--dc-control-primary-color);
1574
1476
 
1575
1477
  color-scheme: light;
1576
1478
  font-family: var(--dc-primary-font);
1577
- display: flex;
1578
- flex-direction: column;
1579
- width: 100%;
1580
- }
1581
-
1582
- .dc-slider_disabled {
1583
- opacity: var(--dc-disabled-state-opacity);
1479
+ font-size: var(--dc-select-font-size);
1480
+ font-weight: 400;
1481
+ line-height: 1;
1482
+ color: var(--dc-select-text-color);
1483
+ position: relative;
1484
+ display: inline-flex;
1485
+ align-items: stretch;
1486
+ box-sizing: border-box;
1487
+ height: var(--dc-select-height);
1488
+ max-width: 100%;
1489
+ vertical-align: middle;
1490
+ border: 1px solid var(--dc-select-border-color);
1491
+ border-radius: var(--dc-select-radius);
1492
+ background: var(--dc-select-bg);
1584
1493
  }
1585
1494
 
1586
- .dc-slider_thumb_rect {
1587
- --dc-slider-thumb-width: 10px;
1495
+ .dc-select__container:focus-within {
1496
+ border-color: var(--dc-select-focus-ring-color);
1497
+ box-shadow: 0 0 0 1px var(--dc-select-focus-ring-color);
1588
1498
  }
1589
1499
 
1590
- .dc-slider__input {
1591
- -webkit-appearance: none;
1592
- -moz-appearance: none;
1593
- appearance: none;
1594
- height: var(--dc-slider-track-height);
1595
- margin: calc((var(--dc-slider-thumb-height) - var(--dc-slider-track-height)) / 2) 0;
1596
- padding: 0;
1597
- border-radius: 2px;
1598
- background: var(--dc-slider-track-bg);
1500
+ .dc-select__container_multiple {
1501
+ overflow: hidden;
1502
+ height: initial;
1599
1503
  }
1600
1504
 
1601
- .dc-slider__input:focus {
1602
- outline: none;
1505
+ .dc-select__container_disabled {
1506
+ opacity: var(--dc-disabled-state-opacity);
1603
1507
  }
1604
1508
 
1605
- .dc-slider__input::-webkit-slider-thumb {
1606
- -webkit-appearance: none;
1607
- appearance: none;
1608
- cursor: pointer;
1609
- box-sizing: border-box;
1610
- width: var(--dc-slider-thumb-width);
1611
- height: var(--dc-slider-thumb-height);
1612
- border: none;
1613
- border-radius: 50%;
1614
- background: var(--dc-slider-thumb-bg);
1615
- box-shadow: var(--dc-slider-thumb-shadow);
1509
+ .dc-select__container_has_error {
1510
+ border-color: var(--dc-select-border-color-error);
1616
1511
  }
1617
1512
 
1618
- .dc-slider__input::-moz-range-thumb {
1619
- -moz-appearance: none;
1620
- appearance: none;
1621
- cursor: pointer;
1622
- box-sizing: border-box;
1623
- width: var(--dc-slider-thumb-width);
1624
- height: var(--dc-slider-thumb-height);
1625
- border: none;
1626
- border-radius: 50%;
1627
- background: var(--dc-slider-thumb-bg);
1628
- box-shadow: var(--dc-slider-thumb-shadow);
1513
+ .dc-select__container_block {
1514
+ width: 100%;
1629
1515
  }
1630
1516
 
1631
- .dc-slider__input::-ms-thumb {
1632
- appearance: none;
1633
- cursor: pointer;
1634
- box-sizing: border-box;
1635
- width: var(--dc-slider-thumb-width);
1636
- height: var(--dc-slider-thumb-height);
1637
- border: none;
1638
- border-radius: 50%;
1639
- background: var(--dc-slider-thumb-bg);
1640
- box-shadow: var(--dc-slider-thumb-shadow);
1517
+ .dc-select__container_sm {
1518
+ --dc-select-font-size: 13px;
1519
+ --dc-select-height: 32px;
1520
+ --dc-select-padding-x: 8px;
1521
+ --dc-select-radius: 5px;
1522
+ --dc-select-arrow-size: 16px;
1641
1523
  }
1642
1524
 
1643
- .dc-slider__input:disabled::-webkit-slider-thumb {
1644
- cursor: default;
1525
+ .dc-select__container_lg {
1526
+ --dc-select-font-size: 15px;
1527
+ --dc-select-height: 40px;
1528
+ --dc-select-padding-x: 16px;
1529
+ --dc-select-radius: 7px;
1530
+ --dc-select-arrow-size: 20px;
1645
1531
  }
1646
1532
 
1647
- .dc-slider__input:disabled::-moz-range-thumb {
1648
- cursor: default;
1533
+ .dc-select {
1534
+ -webkit-appearance: none;
1535
+ -moz-appearance: none;
1536
+ appearance: none;
1537
+ font: inherit;
1538
+ color: inherit;
1539
+ width: 100%;
1540
+ padding-right: calc(var(--dc-select-arrow-size) + var(--dc-select-padding-x));
1541
+ padding-left: var(--dc-select-padding-x);
1542
+ text-transform: none;
1543
+ border: none;
1544
+ background: none;
1649
1545
  }
1650
1546
 
1651
- .dc-slider__input:disabled::-ms-thumb {
1652
- cursor: default;
1547
+ .dc-select__container_multiple .dc-select {
1548
+ margin-top: var(--dc-select-radius);
1549
+ margin-bottom: var(--dc-select-radius);
1550
+ padding: 0;
1653
1551
  }
1654
1552
 
1655
- .dc-slider__input:focus::-webkit-slider-thumb {
1656
- box-shadow: var(--dc-slider-thumb-shadow-focus);
1553
+ .dc-select:focus {
1554
+ outline: none;
1657
1555
  }
1658
1556
 
1659
- .dc-slider__input:focus::-moz-range-thumb {
1660
- box-shadow: var(--dc-slider-thumb-shadow-focus);
1557
+ .dc-select:not(:disabled):hover {
1558
+ cursor: pointer;
1661
1559
  }
1662
1560
 
1663
- .dc-slider__input:focus::-ms-thumb {
1664
- box-shadow: var(--dc-slider-thumb-shadow-focus);
1561
+ .dc-select__icon {
1562
+ position: absolute;
1563
+ top: calc((var(--dc-select-height) - var(--dc-select-arrow-size)) / 2);
1564
+ right: calc(var(--dc-select-padding-x) / 2);
1565
+ width: var(--dc-select-arrow-size);
1566
+ height: var(--dc-select-arrow-size);
1567
+ pointer-events: none;
1665
1568
  }
1666
1569
 
1667
- .dc-slider_thumb_rect .dc-slider__input::-webkit-slider-thumb {
1668
- border-radius: calc(var(--dc-slider-thumb-width) / 2);
1570
+ .dc-select__container_multiple .dc-select__icon {
1571
+ display: none;
1669
1572
  }
1670
1573
 
1671
- .dc-slider_thumb_rect .dc-slider__input::-moz-range-thumb {
1672
- border-radius: calc(var(--dc-slider-thumb-width) / 2);
1673
- }
1574
+ .dc-switch {
1575
+ --dc-switch-width: 38px;
1576
+ --dc-switch-height: 24px;
1577
+ --dc-switch-radius: calc(var(--dc-switch-height) / 2);
1578
+ --dc-switch-track-bg: var(--dc-control-bg-inset);
1579
+ --dc-switch-track-bg-checked: var(--dc-control-primary-color);
1580
+ --dc-switch-thumb-size: calc(var(--dc-switch-height) - var(--dc-switch-thumb-offset) * 2);
1581
+ --dc-switch-thumb-offset: 2px;
1582
+ --dc-switch-thumb-bg: var(--dc-control-on-primary-color);
1583
+ --dc-switch-icon-color: var(--dc-control-primary-color);
1584
+ --dc-switch-focus-ring-color: var(--dc-focus-ring-color);
1674
1585
 
1675
- .dc-slider_thumb_rect .dc-slider__input::-ms-thumb {
1676
- border-radius: calc(var(--dc-slider-thumb-width) / 2);
1586
+ color-scheme: light;
1677
1587
  }
1678
1588
 
1679
- .dc-slider__tick-marks {
1680
- display: flex;
1681
- align-items: flex-start;
1682
- justify-content: space-between;
1683
- margin-top: 4px;
1589
+ .dc-switch__input {
1590
+ -webkit-appearance: none;
1591
+ -moz-appearance: none;
1592
+ appearance: none;
1593
+ position: absolute;
1684
1594
  }
1685
1595
 
1686
- .dc-slider-tick-mark {
1687
- font-size: 12px;
1688
- color: var(--dc-slider-tick-label-color);
1689
- display: inline-flex;
1690
- flex-direction: column;
1691
- align-items: center;
1692
- justify-content: flex-start;
1693
- width: var(--dc-slider-thumb-width);
1694
- text-align: center;
1695
- white-space: nowrap;
1696
- }
1697
-
1698
- .dc-slider-tick-mark::before {
1699
- content: "";
1700
- display: inline-block;
1701
- flex: none;
1702
- width: 2px;
1703
- height: 8px;
1704
- background: var(--dc-slider-tick-color);
1705
- }
1706
-
1707
- .dc-slider-tick-mark__label {
1708
- padding-top: 4px;
1709
- }
1710
-
1711
- .dc-file-picker {
1712
- --dc-file-picker-label-color: var(--dc-control-primary-text-color);
1713
- --dc-file-picker-icon-color: var(--dc-control-secondary-text-color);
1714
- --dc-file-picker-caption-color: var(--dc-control-secondary-text-color);
1715
- --dc-file-picker-border-color: var(--dc-control-border-color);
1716
- --dc-file-picker-border-color-drag-over: var(--dc-control-primary-color);
1717
- --dc-file-picker-bg-drag-over: var(--dc-control-secondary-color);
1718
-
1719
- color-scheme: light;
1596
+ .dc-switch__track {
1597
+ font-size: 16px;
1720
1598
  position: relative;
1721
1599
  display: inline-flex;
1722
- flex-wrap: wrap;
1723
- gap: 12px 20px;
1724
- align-items: center;
1600
+ cursor: pointer;
1601
+ flex: none;
1725
1602
  box-sizing: border-box;
1726
- padding: 16px 20px;
1727
- border: 1px dashed var(--dc-file-picker-border-color);
1728
- border-radius: 8px;
1603
+ width: var(--dc-switch-width);
1604
+ height: var(--dc-switch-height);
1605
+ transition-duration: 0.2s;
1606
+ transition-property: opacity, background-color;
1607
+ vertical-align: middle;
1608
+ border-radius: var(--dc-switch-radius);
1609
+ background: var(--dc-switch-track-bg);
1729
1610
  }
1730
1611
 
1731
- .dc-file-picker__input {
1612
+ .dc-switch__thumb {
1732
1613
  position: absolute;
1733
- overflow: hidden;
1734
- width: 1px;
1735
- height: 1px;
1736
- clip: rect(0, 0, 0, 0);
1737
- }
1738
-
1739
- .dc-file-picker__body {
1740
- font-family: var(--dc-primary-font);
1741
- font-size: 14px;
1742
- line-height: 1.25;
1743
- display: flex;
1744
- flex: auto;
1614
+ top: 0;
1615
+ left: 0;
1616
+ display: inline-flex;
1745
1617
  align-items: center;
1618
+ justify-content: center;
1619
+ width: var(--dc-switch-thumb-size);
1620
+ height: var(--dc-switch-thumb-size);
1621
+ transform:
1622
+ translateX(var(--dc-switch-thumb-offset))
1623
+ translateY(var(--dc-switch-thumb-offset));
1624
+ transition: transform 0.2s;
1625
+ border-radius: 50%;
1626
+ background: var(--dc-switch-thumb-bg);
1627
+ box-shadow:
1628
+ 0 1px 3px 0 rgba(0, 0, 0, 0.1),
1629
+ 0 4px 6px -1px rgba(0, 0, 0, 0.1),
1630
+ 0 2px 4px -1px rgba(0, 0, 0, 0.06);
1746
1631
  }
1747
1632
 
1748
- .dc-file-picker__icon {
1749
- color: var(--dc-file-picker-icon-color);
1750
- display: inline-flex;
1751
- margin-right: 16px;
1633
+ .dc-switch__icon {
1634
+ color: var(--dc-switch-icon-color);
1635
+ opacity: 0;
1636
+ transition: opacity 0.2s;
1752
1637
  }
1753
1638
 
1754
- .dc-file-picker__label {
1755
- color: var(--dc-file-picker-label-color);
1639
+ .dc-switch__input:checked + .dc-switch__track {
1640
+ background: var(--dc-switch-track-bg-checked);
1756
1641
  }
1757
1642
 
1758
- .dc-file-picker__caption {
1759
- font-size: 12px;
1760
- color: var(--dc-file-picker-caption-color);
1761
- margin-top: 4px;
1643
+ .dc-switch__input:checked + .dc-switch__track .dc-switch__thumb {
1644
+ transform:
1645
+ translateX(
1646
+ calc(
1647
+ var(--dc-switch-width) -
1648
+ var(--dc-switch-thumb-size) -
1649
+ var(--dc-switch-thumb-offset)
1650
+ )
1651
+ )
1652
+ translateY(var(--dc-switch-thumb-offset));
1762
1653
  }
1763
1654
 
1764
- .dc-file-picker__button {
1765
- box-shadow: none;
1655
+ .dc-switch__input:checked + .dc-switch__track .dc-switch__icon {
1656
+ opacity: 1;
1766
1657
  }
1767
1658
 
1768
- .dc-file-picker_disabled {
1659
+ .dc-switch__input:disabled + .dc-switch__track {
1769
1660
  opacity: var(--dc-disabled-state-opacity);
1661
+ cursor: default;
1770
1662
  }
1771
1663
 
1772
- .dc-file-picker_disabled .dc-file-picker__button {
1773
- pointer-events: none;
1774
- }
1775
-
1776
- .dc-file-picker_dragging-over {
1777
- border-color: var(--dc-file-picker-border-color-drag-over);
1778
- background: var(--dc-file-picker-bg-drag-over);
1664
+ .dc-switch__input:focus {
1665
+ outline: none;
1779
1666
  }
1780
1667
 
1781
- .dc-datepicker {
1782
- --dc-columnheader-text-color: var(--dc-control-secondary-text-color);
1783
-
1784
- /* Day properties */
1785
- --dc-day-font-size: 14px;
1786
- --dc-day-text-color: var(--dc-control-primary-text-color);
1787
- --dc-day-text-color-today: var(--dc-control-primary-color);
1788
- --dc-day-text-color-weekend: var(--dc-control-secondary-text-color);
1789
- --dc-day-text-color-selected: var(--dc-control-on-primary-color);
1790
- --dc-day-size: 32px;
1791
- --dc-day-max-width: 40px;
1792
- --dc-day-radius: 16px;
1793
- --dc-day-border-color: transparent;
1794
- --dc-day-border-color-hover: var(--dc-control-primary-color);
1795
- --dc-day-bg-selected: var(--dc-control-primary-color);
1796
- --dc-day-bg-selected-hover: var(--dc-control-primary-color-hover);
1797
- --dc-day-bg-range: var(--dc-control-secondary-color);
1798
- --dc-day-focus-ring-color: var(--dc-control-primary-color);
1799
-
1800
- color-scheme: light;
1801
- display: inline-block;
1668
+ .dc-switch__input:focus + .dc-switch__track::after {
1669
+ content: "";
1670
+ position: absolute;
1671
+ z-index: -1;
1672
+ inset: -3px;
1673
+ border-radius: calc(3px + var(--dc-switch-radius));
1674
+ box-shadow: 0 0 0 3px var(--dc-switch-focus-ring-color);
1802
1675
  }
1803
1676
 
1804
- /* Calendar controls */
1805
-
1806
- .dc-calendar-next-month,
1807
- .dc-calendar-prev-month {
1808
- --dc-button-height: 28px;
1677
+ .dc-switch__input:focus:not(:focus-visible) + .dc-switch__track::after {
1678
+ content: none;
1809
1679
  }
1810
1680
 
1811
- .dc-calendar-month-select {
1812
- --dc-select-height: 28px;
1813
- }
1681
+ .dc-checkbox {
1682
+ --dc-checkbox-size: 20px;
1683
+ --dc-checkbox-radius: 6px;
1684
+ --dc-checkbox-bg: var(--dc-control-bg);
1685
+ --dc-checkbox-bg-checked: var(--dc-control-primary-color);
1686
+ --dc-checkbox-border-color: var(--dc-control-border-color);
1687
+ --dc-checkbox-border-color-checked: var(--dc-control-primary-color);
1688
+ --dc-checkbox-icon-color: var(--dc-control-on-primary-color);
1689
+ --dc-checkbox-focus-ring-color: var(--dc-focus-ring-color);
1814
1690
 
1815
- .dc-calendar-year-input {
1816
- --dc-input-height: 28px;
1691
+ color-scheme: light;
1817
1692
  }
1818
1693
 
1819
- /* Calendar day */
1820
-
1821
- .dc-calendar-day {
1694
+ .dc-checkbox__input {
1822
1695
  -webkit-appearance: none;
1823
1696
  -moz-appearance: none;
1824
1697
  appearance: none;
1825
- font-family: var(--dc-primary-font);
1826
- font-size: 14px;
1827
- font-weight: 500;
1828
- color: var(--dc-day-text-color);
1829
- width: 100%;
1830
- margin: 0;
1831
- padding: 0;
1832
- border: none;
1833
- background: none;
1698
+ position: absolute;
1834
1699
  }
1835
1700
 
1836
- .dc-calendar-day__body {
1701
+ .dc-checkbox__check {
1702
+ font-size: 16px;
1703
+ position: relative;
1837
1704
  display: inline-flex;
1705
+ cursor: pointer;
1706
+ flex: none;
1838
1707
  align-items: center;
1839
1708
  justify-content: center;
1840
1709
  box-sizing: border-box;
1841
- width: var(--dc-day-size);
1842
- height: var(--dc-day-size);
1843
- border-radius: var(--dc-day-radius);
1844
- }
1845
-
1846
- .dc-calendar-day_in-range {
1847
- position: relative;
1848
- }
1849
-
1850
- .dc-calendar-day_in-range::before {
1851
- content: "";
1852
- position: absolute;
1853
- z-index: -1;
1854
- top: 0;
1855
- right: 0;
1856
- bottom: 0;
1857
- left: 0;
1858
- background: var(--dc-day-bg-range);
1710
+ width: var(--dc-checkbox-size);
1711
+ height: var(--dc-checkbox-size);
1712
+ transition: opacity 0.2s;
1713
+ vertical-align: middle;
1714
+ border: 1px solid var(--dc-checkbox-border-color);
1715
+ border-radius: var(--dc-checkbox-radius);
1716
+ background: var(--dc-checkbox-bg);
1859
1717
  }
1860
1718
 
1861
- .dc-calendar-day_range-start::before {
1862
- left: calc(50% - var(--dc-day-size) / 2);
1863
- border-top-left-radius: var(--dc-day-radius);
1864
- border-bottom-left-radius: var(--dc-day-radius);
1719
+ .dc-checkbox__icon {
1720
+ color: var(--dc-checkbox-icon-color);
1721
+ display: none;
1865
1722
  }
1866
1723
 
1867
- .dc-calendar-day_range-end::before {
1868
- right: calc(50% - var(--dc-day-size) / 2);
1869
- border-top-right-radius: var(--dc-day-radius);
1870
- border-bottom-right-radius: var(--dc-day-radius);
1724
+ .dc-checkbox__input:checked + .dc-checkbox__check {
1725
+ border-color: var(--dc-checkbox-border-color-checked);
1726
+ background: var(--dc-checkbox-bg-checked);
1871
1727
  }
1872
1728
 
1873
- .dc-calendar-day_weekend > .dc-calendar-day__body {
1874
- color: var(--dc-day-text-color-weekend);
1729
+ .dc-checkbox__input:checked + .dc-checkbox__check .dc-checkbox__icon {
1730
+ display: initial;
1875
1731
  }
1876
1732
 
1877
- .dc-calendar-day_today > .dc-calendar-day__body {
1878
- color: var(--dc-day-text-color-today);
1733
+ .dc-checkbox__input:disabled + .dc-checkbox__check {
1734
+ opacity: var(--dc-disabled-state-opacity);
1735
+ cursor: default;
1879
1736
  }
1880
1737
 
1881
- .dc-calendar-day_selected > .dc-calendar-day__body {
1882
- color: var(--dc-day-text-color-selected);
1883
- background: var(--dc-day-bg-selected);
1738
+ .dc-checkbox__input:focus {
1739
+ outline: none;
1884
1740
  }
1885
1741
 
1886
- .dc-calendar-day:hover {
1887
- cursor: pointer;
1742
+ .dc-checkbox__input:focus + .dc-checkbox__check::after {
1743
+ content: "";
1744
+ position: absolute;
1745
+ z-index: -1;
1746
+ inset: -3px;
1747
+ border-radius: calc(3px + var(--dc-checkbox-radius));
1748
+ box-shadow: 0 0 0 3px var(--dc-checkbox-focus-ring-color);
1888
1749
  }
1889
1750
 
1890
- .dc-calendar-day:hover > .dc-calendar-day__body {
1891
- box-shadow: inset 0 0 0 2px var(--dc-day-border-color-hover);
1751
+ .dc-checkbox__input:focus:not(:focus-visible) + .dc-checkbox__check::after {
1752
+ content: none;
1892
1753
  }
1893
1754
 
1894
- .dc-calendar-day_selected:hover > .dc-calendar-day__body {
1895
- background: var(--dc-day-bg-selected-hover);
1896
- box-shadow: none;
1897
- }
1755
+ .dc-radio {
1756
+ --dc-radio-size: 20px;
1757
+ --dc-radio-color-bg: var(--dc-control-bg);
1758
+ --dc-radio-color-bg-checked: var(--dc-control-primary-color);
1759
+ --dc-radio-color-border: var(--dc-control-border-color);
1760
+ --dc-radio-color-border-checked: var(--dc-control-primary-color);
1761
+ --dc-radio-color-icon: var(--dc-control-on-primary-color);
1762
+ --dc-radio-color-focus-ring: var(--dc-focus-ring-color);
1898
1763
 
1899
- .dc-calendar-day:disabled {
1900
- cursor: default;
1764
+ color-scheme: light;
1901
1765
  }
1902
1766
 
1903
- .dc-calendar-day:disabled > .dc-calendar-day__body {
1904
- opacity: var(--dc-disabled-state-opacity);
1905
- box-shadow: none;
1767
+ .dc-radio__input {
1768
+ -webkit-appearance: none;
1769
+ -moz-appearance: none;
1770
+ appearance: none;
1771
+ position: absolute;
1906
1772
  }
1907
1773
 
1908
- .dc-calendar-day:focus {
1909
- outline: none;
1774
+ .dc-radio__check {
1775
+ font-size: 16px;
1776
+ position: relative;
1777
+ display: inline-flex;
1778
+ cursor: pointer;
1779
+ flex: none;
1780
+ align-items: center;
1781
+ justify-content: center;
1782
+ box-sizing: border-box;
1783
+ width: var(--dc-radio-size);
1784
+ height: var(--dc-radio-size);
1785
+ transition: opacity 0.2s;
1786
+ vertical-align: middle;
1787
+ border: 1px solid var(--dc-radio-color-border);
1788
+ border-radius: 50%;
1789
+ background: var(--dc-radio-color-bg);
1910
1790
  }
1911
1791
 
1912
- .dc-calendar-day:focus > .dc-calendar-day__body {
1913
- box-shadow: inset 0 0 0 2px var(--dc-day-border-color-hover);
1792
+ .dc-radio__icon {
1793
+ color: var(--dc-radio-color-icon);
1794
+ display: none;
1914
1795
  }
1915
1796
 
1916
- .dc-calendar-day_selected:focus > .dc-calendar-day__body {
1917
- position: relative;
1918
- box-shadow: none;
1797
+ .dc-radio__input:checked + .dc-radio__check {
1798
+ border-color: var(--dc-radio-color-border-checked);
1799
+ background: var(--dc-radio-color-bg-checked);
1919
1800
  }
1920
1801
 
1921
- .dc-calendar-day_selected:focus > .dc-calendar-day__body::after {
1922
- content: "";
1923
- position: absolute;
1924
- inset: -2px;
1925
- border-radius: 50%;
1926
- box-shadow: 0 0 0 2px var(--dc-day-focus-ring-color);
1802
+ .dc-radio__input:checked + .dc-radio__check .dc-radio__icon {
1803
+ display: initial;
1927
1804
  }
1928
1805
 
1929
- /* Calendar styles */
1930
-
1931
- .dc-calendar {
1932
- display: inline-flex;
1933
- flex-direction: column;
1934
- width: calc(7 * var(--dc-day-max-width));
1935
- min-width: calc(7 * var(--dc-day-size));
1936
- max-width: 100%;
1806
+ .dc-radio__input:disabled + .dc-radio__check {
1807
+ opacity: var(--dc-disabled-state-opacity);
1808
+ cursor: default;
1937
1809
  }
1938
1810
 
1939
- .dc-calendar__header {
1940
- display: flex;
1941
- align-items: center;
1942
- justify-content: space-between;
1811
+ .dc-radio__input:focus {
1812
+ outline: none;
1943
1813
  }
1944
1814
 
1945
- .dc-calendar__header > * {
1946
- margin-right: 2px;
1947
- margin-left: 2px;
1815
+ .dc-radio__input:focus + .dc-radio__check::after {
1816
+ content: "";
1817
+ position: absolute;
1818
+ z-index: -1;
1819
+ inset: -3px;
1820
+ border-radius: 50%;
1821
+ box-shadow: 0 0 0 3px var(--dc-radio-color-focus-ring);
1948
1822
  }
1949
1823
 
1950
- .dc-calendar__header > *:first-child {
1951
- margin-right: auto;
1952
- margin-left: 0;
1824
+ .dc-radio__input:focus:not(:focus-visible) + .dc-radio__check::after {
1825
+ content: none;
1953
1826
  }
1954
1827
 
1955
- .dc-calendar__header > *:last-child {
1956
- margin-right: 0;
1957
- margin-left: auto;
1958
- }
1828
+ .dc-slider {
1829
+ --dc-slider-track-height: 4px;
1830
+ --dc-slider-track-bg: var(--dc-control-bg-inset);
1831
+ --dc-slider-track-bg-fill: var(--dc-control-primary-color);
1832
+ --dc-slider-tick-color: var(--dc-control-border-color);
1833
+ --dc-slider-tick-label-color: var(--dc-control-secondary-text-color);
1834
+ --dc-slider-focus-ring-color: var(--dc-focus-ring-color);
1959
1835
 
1960
- .dc-calendar__grid {
1961
- margin-top: 16px;
1962
- border-spacing: 0;
1963
- }
1836
+ /* Thumb properties */
1837
+ --dc-slider-thumb-width: 20px;
1838
+ --dc-slider-thumb-height: 20px;
1839
+ --dc-slider-thumb-bg: var(--dc-control-on-primary-color);
1840
+ --dc-slider-thumb-shadow:
1841
+ 0 0 0 1px rgba(0, 0, 0, 0.1),
1842
+ 0 2px 3px rgba(0, 0, 0, 0.2);
1843
+ --dc-slider-thumb-shadow-focus:
1844
+ var(--dc-slider-thumb-shadow),
1845
+ 0 0 0 3px var(--dc-slider-focus-ring-color);
1964
1846
 
1965
- .dc-calendar__grid th,
1966
- .dc-calendar__grid td {
1967
- padding: 0;
1968
- text-align: center;
1969
- vertical-align: middle;
1847
+ color-scheme: light;
1848
+ font-family: var(--dc-primary-font);
1849
+ display: flex;
1850
+ flex-direction: column;
1851
+ width: 100%;
1970
1852
  }
1971
1853
 
1972
- .dc-calendar__grid th {
1973
- font-size: 14px;
1974
- font-weight: 400;
1975
- color: var(--dc-columnheader-text-color);
1976
- padding-bottom: 4px;
1854
+ .dc-slider_disabled {
1855
+ opacity: var(--dc-disabled-state-opacity);
1977
1856
  }
1978
1857
 
1979
- .dc-calendar__grid td {
1980
- padding-top: 4px;
1858
+ .dc-slider_thumb_rect {
1859
+ --dc-slider-thumb-width: 10px;
1981
1860
  }
1982
1861
 
1983
- .dc-segmented {
1984
- --dc-segmented-bg: var(--dc-bg-transparent-1);
1985
- --dc-segmented-border-color: var(--dc-control-border-color);
1986
- --dc-segmented-delimiter-color: var(--dc-border-color-transparent-3);
1987
- --dc-segmented-btn-padding-x: 16px;
1988
- --dc-segmented-btn-bg-checked: white;
1989
- --dc-segmented-btn-border-color: transparent;
1990
- --dc-segmented-btn-border-color-focus: var(--dc-blue-600);
1991
- --dc-segmented-btn-border-color-checked: var(--dc-gray-500);
1992
- --dc-segmented-btn-focus-ring-color: var(--dc-focus-ring-color);
1993
-
1994
- color-scheme: light;
1995
- font: 14px/1 var(--dc-primary-font);
1996
- display: inline-flex;
1997
- align-items: stretch;
1998
- height: 36px;
1999
- margin: 0;
1862
+ .dc-slider__input {
1863
+ -webkit-appearance: none;
1864
+ -moz-appearance: none;
1865
+ appearance: none;
1866
+ height: var(--dc-slider-track-height);
1867
+ margin: calc((var(--dc-slider-thumb-height) - var(--dc-slider-track-height)) / 2) 0;
2000
1868
  padding: 0;
2001
- list-style: none;
2002
- border-radius: 9px;
2003
- background: var(--dc-segmented-bg);
2004
- box-shadow: inset 0 0 0 1px var(--dc-segmented-border-color);
1869
+ border-radius: 2px;
1870
+ background: var(--dc-slider-track-bg);
2005
1871
  }
2006
1872
 
2007
- .dc-segmented_disabled {
2008
- opacity: var(--dc-disabled-state-opacity);
2009
- pointer-events: none;
1873
+ .dc-slider__input:focus {
1874
+ outline: none;
2010
1875
  }
2011
1876
 
2012
- .dc-segmented_sm {
2013
- --dc-segmented-btn-padding-x: 12px;
2014
-
2015
- font-size: 13px;
2016
- height: 32px;
2017
- border-radius: 8px;
1877
+ .dc-slider__input::-webkit-slider-thumb {
1878
+ -webkit-appearance: none;
1879
+ appearance: none;
1880
+ cursor: pointer;
1881
+ box-sizing: border-box;
1882
+ width: var(--dc-slider-thumb-width);
1883
+ height: var(--dc-slider-thumb-height);
1884
+ border: none;
1885
+ border-radius: 50%;
1886
+ background: var(--dc-slider-thumb-bg);
1887
+ box-shadow: var(--dc-slider-thumb-shadow);
2018
1888
  }
2019
1889
 
2020
- .dc-segmented_lg {
2021
- --dc-segmented-btn-padding-x: 18px;
2022
-
2023
- font-size: 15px;
2024
- height: 40px;
2025
- border-radius: 10px;
1890
+ .dc-slider__input::-moz-range-thumb {
1891
+ -moz-appearance: none;
1892
+ appearance: none;
1893
+ cursor: pointer;
1894
+ box-sizing: border-box;
1895
+ width: var(--dc-slider-thumb-width);
1896
+ height: var(--dc-slider-thumb-height);
1897
+ border: none;
1898
+ border-radius: 50%;
1899
+ background: var(--dc-slider-thumb-bg);
1900
+ box-shadow: var(--dc-slider-thumb-shadow);
2026
1901
  }
2027
1902
 
2028
- .dc-segmented__button {
2029
- position: relative;
2030
- display: flex;
1903
+ .dc-slider__input::-ms-thumb {
1904
+ appearance: none;
2031
1905
  cursor: pointer;
2032
- -webkit-user-select: none;
2033
- -moz-user-select: none;
2034
- user-select: none;
2035
- flex: auto;
2036
- gap: calc(var(--dc-segmented-btn-padding-x) / 2);
2037
- align-items: center;
2038
- justify-content: center;
2039
1906
  box-sizing: border-box;
2040
- padding: 0 var(--dc-segmented-btn-padding-x);
2041
- border: 1px solid var(--dc-segmented-btn-border-color);
2042
- border-radius: inherit;
1907
+ width: var(--dc-slider-thumb-width);
1908
+ height: var(--dc-slider-thumb-height);
1909
+ border: none;
1910
+ border-radius: 50%;
1911
+ background: var(--dc-slider-thumb-bg);
1912
+ box-shadow: var(--dc-slider-thumb-shadow);
2043
1913
  }
2044
1914
 
2045
- .dc-segmented__button[aria-checked="true"] {
2046
- --dc-segmented-btn-border-color: var(--dc-segmented-btn-border-color-checked);
1915
+ .dc-slider__input:disabled::-webkit-slider-thumb {
1916
+ cursor: default;
1917
+ }
2047
1918
 
1919
+ .dc-slider__input:disabled::-moz-range-thumb {
2048
1920
  cursor: default;
2049
- background: var(--dc-segmented-btn-bg-checked);
2050
1921
  }
2051
1922
 
2052
- .dc-segmented__button:focus {
2053
- border-color: var(--dc-segmented-btn-border-color-focus);
2054
- outline: none;
2055
- box-shadow: 0 0 0 3px var(--dc-segmented-btn-focus-ring-color);
1923
+ .dc-slider__input:disabled::-ms-thumb {
1924
+ cursor: default;
2056
1925
  }
2057
1926
 
2058
- .dc-segmented__button:focus:not(:focus-visible) {
2059
- border-color: var(--dc-segmented-btn-border-color);
2060
- box-shadow: none;
1927
+ .dc-slider__input:focus::-webkit-slider-thumb {
1928
+ box-shadow: var(--dc-slider-thumb-shadow-focus);
2061
1929
  }
2062
1930
 
2063
- .dc-segmented__button + .dc-segmented__button::before {
2064
- content: "";
2065
- position: absolute;
2066
- z-index: -1;
2067
- top: 50%;
2068
- left: -2px;
2069
- width: 1px;
2070
- height: 50%;
2071
- transform: translateY(-50%);
2072
- background: var(--dc-segmented-delimiter-color);
1931
+ .dc-slider__input:focus::-moz-range-thumb {
1932
+ box-shadow: var(--dc-slider-thumb-shadow-focus);
2073
1933
  }
2074
1934
 
2075
- .dc-segmented__button[aria-checked="true"]::before {
2076
- opacity: 0;
1935
+ .dc-slider__input:focus::-ms-thumb {
1936
+ box-shadow: var(--dc-slider-thumb-shadow-focus);
2077
1937
  }
2078
1938
 
2079
- .dc-label {
2080
- --dc-label-text-color: var(--dc-primary-text-color);
2081
- --dc-label-required-mark-color: #dc2626;
1939
+ .dc-slider_thumb_rect .dc-slider__input::-webkit-slider-thumb {
1940
+ border-radius: calc(var(--dc-slider-thumb-width) / 2);
1941
+ }
2082
1942
 
2083
- color-scheme: light;
2084
- font: var(--dc-text-sm);
2085
- font-weight: 500;
2086
- color: var(--dc-label-text-color);
1943
+ .dc-slider_thumb_rect .dc-slider__input::-moz-range-thumb {
1944
+ border-radius: calc(var(--dc-slider-thumb-width) / 2);
1945
+ }
1946
+
1947
+ .dc-slider_thumb_rect .dc-slider__input::-ms-thumb {
1948
+ border-radius: calc(var(--dc-slider-thumb-width) / 2);
1949
+ }
1950
+
1951
+ .dc-slider__tick-marks {
1952
+ display: flex;
1953
+ align-items: flex-start;
1954
+ justify-content: space-between;
1955
+ margin-top: 4px;
1956
+ }
1957
+
1958
+ .dc-slider-tick-mark {
1959
+ font-size: 12px;
1960
+ color: var(--dc-slider-tick-label-color);
1961
+ display: inline-flex;
1962
+ flex-direction: column;
1963
+ align-items: center;
1964
+ justify-content: flex-start;
1965
+ width: var(--dc-slider-thumb-width);
1966
+ text-align: center;
1967
+ white-space: nowrap;
1968
+ }
1969
+
1970
+ .dc-slider-tick-mark::before {
1971
+ content: "";
2087
1972
  display: inline-block;
1973
+ flex: none;
1974
+ width: 2px;
1975
+ height: 8px;
1976
+ background: var(--dc-slider-tick-color);
2088
1977
  }
2089
1978
 
2090
- .dc-label_required::after {
2091
- content: "*";
2092
- color: var(--dc-label-required-mark-color);
2093
- padding-left: 0.25em;
1979
+ .dc-slider-tick-mark__label {
1980
+ padding-top: 4px;
2094
1981
  }
2095
1982
 
2096
- .dc-caption {
1983
+ .dc-file-picker {
1984
+ --dc-file-picker-label-color: var(--dc-control-primary-text-color);
1985
+ --dc-file-picker-icon-color: var(--dc-control-secondary-text-color);
1986
+ --dc-file-picker-caption-color: var(--dc-control-secondary-text-color);
1987
+ --dc-file-picker-border-color: var(--dc-control-border-color);
1988
+ --dc-file-picker-border-color-drag-over: var(--dc-control-primary-color);
1989
+ --dc-file-picker-bg-drag-over: var(--dc-control-secondary-color);
1990
+
2097
1991
  color-scheme: light;
2098
- font: var(--dc-text-sm);
2099
- color: var(--dc-secondary-text-color);
2100
- display: block;
1992
+ position: relative;
1993
+ display: inline-flex;
1994
+ flex-wrap: wrap;
1995
+ gap: 12px 20px;
2101
1996
  align-items: center;
2102
- text-align: left;
1997
+ box-sizing: border-box;
1998
+ padding: 16px 20px;
1999
+ border: 1px dashed var(--dc-file-picker-border-color);
2000
+ border-radius: 8px;
2103
2001
  }
2104
2002
 
2105
- .dc-caption_appearance_info {
2106
- color: var(--dc-info-text-color);
2003
+ .dc-file-picker__input {
2004
+ position: absolute;
2005
+ overflow: hidden;
2006
+ width: 1px;
2007
+ height: 1px;
2008
+ clip: rect(0, 0, 0, 0);
2107
2009
  }
2108
2010
 
2109
- .dc-caption_appearance_success {
2110
- color: var(--dc-success-text-color);
2011
+ .dc-file-picker__body {
2012
+ font-family: var(--dc-primary-font);
2013
+ font-size: 14px;
2014
+ line-height: 1.25;
2015
+ display: flex;
2016
+ flex: auto;
2017
+ align-items: center;
2111
2018
  }
2112
2019
 
2113
- .dc-caption_appearance_error {
2114
- color: var(--dc-error-text-color);
2020
+ .dc-file-picker__icon {
2021
+ color: var(--dc-file-picker-icon-color);
2022
+ display: inline-flex;
2023
+ margin-right: 16px;
2115
2024
  }
2116
2025
 
2117
- .dc-caption_appearance_warning {
2118
- color: var(--dc-warning-text-color);
2026
+ .dc-file-picker__label {
2027
+ color: var(--dc-file-picker-label-color);
2119
2028
  }
2120
2029
 
2121
- .dc-caption__icon {
2122
- color: inherit;
2123
- float: left;
2124
- width: 20px;
2125
- height: 20px;
2126
- margin-right: 0.5em;
2030
+ .dc-file-picker__caption {
2031
+ font-size: 12px;
2032
+ color: var(--dc-file-picker-caption-color);
2033
+ margin-top: 4px;
2127
2034
  }
2128
2035
 
2129
- .dc-selection-control {
2130
- color-scheme: light;
2131
- display: grid;
2132
- grid-template-areas:
2133
- "input label"
2134
- ". caption";
2135
- grid-template-columns: auto 1fr;
2136
- grid-gap: 2px 12px;
2137
- justify-items: start;
2036
+ .dc-file-picker__button {
2037
+ box-shadow: none;
2138
2038
  }
2139
2039
 
2140
- .dc-selection-control__input {
2141
- grid-area: input;
2040
+ .dc-file-picker_disabled {
2041
+ opacity: var(--dc-disabled-state-opacity);
2142
2042
  }
2143
2043
 
2144
- .dc-selection-control__label {
2145
- -webkit-user-select: none;
2146
- -moz-user-select: none;
2147
- user-select: none;
2148
- grid-area: label;
2149
- align-self: center;
2044
+ .dc-file-picker_disabled .dc-file-picker__button {
2045
+ pointer-events: none;
2150
2046
  }
2151
2047
 
2152
- .dc-selection-control__caption {
2153
- grid-area: caption;
2048
+ .dc-file-picker_dragging-over {
2049
+ border-color: var(--dc-file-picker-border-color-drag-over);
2050
+ background: var(--dc-file-picker-bg-drag-over);
2154
2051
  }
2155
2052
 
2156
- .dc-form-field {
2053
+ .dc-datepicker {
2054
+ --dc-columnheader-text-color: var(--dc-control-secondary-text-color);
2055
+
2056
+ /* Day properties */
2057
+ --dc-day-font-size: 14px;
2058
+ --dc-day-text-color: var(--dc-control-primary-text-color);
2059
+ --dc-day-text-color-today: var(--dc-control-primary-color);
2060
+ --dc-day-text-color-weekend: var(--dc-control-secondary-text-color);
2061
+ --dc-day-text-color-selected: var(--dc-control-on-primary-color);
2062
+ --dc-day-size: 32px;
2063
+ --dc-day-max-width: 40px;
2064
+ --dc-day-radius: 16px;
2065
+ --dc-day-border-color: transparent;
2066
+ --dc-day-border-color-hover: var(--dc-control-primary-color);
2067
+ --dc-day-bg-selected: var(--dc-control-primary-color);
2068
+ --dc-day-bg-selected-hover: var(--dc-control-primary-color-hover);
2069
+ --dc-day-bg-range: var(--dc-control-secondary-color);
2070
+ --dc-day-focus-ring-color: var(--dc-control-primary-color);
2071
+
2157
2072
  color-scheme: light;
2158
- display: block;
2159
- text-align: left;
2073
+ display: inline-block;
2160
2074
  }
2161
2075
 
2162
- .dc-form-field__label {
2163
- margin-bottom: 4px;
2076
+ /* Calendar controls */
2077
+
2078
+ .dc-calendar-next-month,
2079
+ .dc-calendar-prev-month {
2080
+ --dc-button-height: 28px;
2164
2081
  }
2165
2082
 
2166
- .dc-form-field__error,
2167
- .dc-form-field__caption {
2168
- display: block;
2169
- margin-top: 4px;
2083
+ .dc-calendar-month-select {
2084
+ --dc-select-height: 28px;
2170
2085
  }
2171
2086
 
2172
- .dc-color-picker {
2173
- --dc-color-picker-btn-size: 24px;
2174
- --dc-color-picker-btn-color: var(--dc-control-on-primary-color);
2175
- --dc-color-picker-btn-check-color: white;
2176
- --dc-color-picker-btn-inner-border-color: rgba(0, 0, 0, 0.05);
2177
- --dc-color-picker-btn-focus-ring-color: var(--dc-focus-ring-color);
2087
+ .dc-calendar-year-input {
2088
+ --dc-input-height: 28px;
2089
+ }
2178
2090
 
2179
- color-scheme: light;
2180
- display: inline-flex;
2181
- flex-wrap: wrap;
2182
- gap: 12px;
2183
- align-items: center;
2184
- justify-content: flex-start;
2091
+ /* Calendar day */
2092
+
2093
+ .dc-calendar-day {
2094
+ -webkit-appearance: none;
2095
+ -moz-appearance: none;
2096
+ appearance: none;
2097
+ font-family: var(--dc-primary-font);
2098
+ font-size: 14px;
2099
+ font-weight: 500;
2100
+ color: var(--dc-day-text-color);
2101
+ width: 100%;
2185
2102
  margin: 0;
2186
2103
  padding: 0;
2187
2104
  border: none;
2105
+ background: none;
2188
2106
  }
2189
2107
 
2190
- .dc-color-picker_disabled {
2191
- opacity: var(--dc-disabled-state-opacity);
2192
- }
2193
-
2194
- .dc-color-picker__btn {
2195
- font-size: 0;
2196
- color: transparent;
2197
- position: relative;
2108
+ .dc-calendar-day__body {
2198
2109
  display: inline-flex;
2199
- cursor: pointer;
2200
- flex: none;
2201
2110
  align-items: center;
2202
2111
  justify-content: center;
2203
- width: var(--dc-color-picker-btn-size);
2204
- height: var(--dc-color-picker-btn-size);
2205
- border-radius: 50%;
2206
- background: var(--dc-color-picker-btn-color);
2207
- box-shadow: inset 0 0 0 1px var(--dc-color-picker-btn-inner-border-color);
2112
+ box-sizing: border-box;
2113
+ width: var(--dc-day-size);
2114
+ height: var(--dc-day-size);
2115
+ border-radius: var(--dc-day-radius);
2208
2116
  }
2209
2117
 
2210
- .dc-color-picker_disabled .dc-color-picker__btn {
2211
- cursor: default;
2118
+ .dc-calendar-day_in-range {
2119
+ position: relative;
2212
2120
  }
2213
2121
 
2214
- .dc-color-picker__btn > input {
2122
+ .dc-calendar-day_in-range::before {
2123
+ content: "";
2215
2124
  position: absolute;
2216
- overflow: hidden;
2217
- -webkit-clip-path: inset(50%);
2218
- clip-path: inset(50%);
2219
- width: 1px;
2220
- height: 1px;
2221
- white-space: nowrap;
2222
- clip: rect(0 0 0 0);
2125
+ z-index: -1;
2126
+ top: 0;
2127
+ right: 0;
2128
+ bottom: 0;
2129
+ left: 0;
2130
+ background: var(--dc-day-bg-range);
2223
2131
  }
2224
2132
 
2225
- .dc-color-picker__btn_checked::after {
2226
- content: "";
2227
- display: inline-block;
2228
- width: 38%;
2229
- height: 38%;
2230
- border-radius: 50%;
2231
- background: var(--dc-color-picker-btn-check-color);
2232
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
2133
+ .dc-calendar-day_range-start::before {
2134
+ left: calc(50% - var(--dc-day-size) / 2);
2135
+ border-top-left-radius: var(--dc-day-radius);
2136
+ border-bottom-left-radius: var(--dc-day-radius);
2233
2137
  }
2234
2138
 
2235
- .dc-color-picker__btn:focus-within::before {
2236
- content: "";
2237
- position: absolute;
2238
- z-index: -1;
2239
- inset: -2px;
2240
- display: inline-block;
2241
- border-radius: 50%;
2242
- box-shadow: 0 0 0 3px var(--dc-color-picker-btn-focus-ring-color);
2139
+ .dc-calendar-day_range-end::before {
2140
+ right: calc(50% - var(--dc-day-size) / 2);
2141
+ border-top-right-radius: var(--dc-day-radius);
2142
+ border-bottom-right-radius: var(--dc-day-radius);
2243
2143
  }
2244
2144
 
2245
- /* Data display */
2246
-
2247
- .dc-table-container,
2248
- .dc-table {
2249
- --dc-table-border-color: var(--dc-border-color-transparent-2);
2250
- --dc-table-bg: none;
2251
- --dc-table-head-bg: var(--dc-bg-transparent-1);
2252
- --dc-table-row-bg-stripped: var(--dc-bg-transparent-1);
2253
- --dc-table-row-bg-selected: var(--dc-bg-transparent-1);
2254
- --dc-table-row-bg-highlighted: var(--dc-bg-transparent-1);
2255
- --dc-table-cell-bg-hover: var(--dc-bg-transparent-1);
2256
- --dc-table-cell-bg-focus: var(--dc-bg-transparent-1);
2257
- --dc-table-cell-padding-x: 12px;
2258
- --dc-table-cell-padding-y: 8px;
2259
- --dc-table-sort-icon-size: 16px;
2260
-
2261
- color-scheme: light;
2145
+ .dc-calendar-day_weekend > .dc-calendar-day__body {
2146
+ color: var(--dc-day-text-color-weekend);
2262
2147
  }
2263
2148
 
2264
- .dc-table-container {
2265
- overflow-x: auto;
2266
- box-sizing: border-box;
2267
- width: 100%;
2268
- border: 0 solid var(--dc-table-border-color);
2149
+ .dc-calendar-day_today > .dc-calendar-day__body {
2150
+ color: var(--dc-day-text-color-today);
2269
2151
  }
2270
2152
 
2271
- .dc-table-container_border_all {
2272
- border-width: 1px;
2153
+ .dc-calendar-day_selected > .dc-calendar-day__body {
2154
+ color: var(--dc-day-text-color-selected);
2155
+ background: var(--dc-day-bg-selected);
2273
2156
  }
2274
2157
 
2275
- .dc-table-container_border_top {
2276
- border-top-width: 1px;
2158
+ .dc-calendar-day:hover {
2159
+ cursor: pointer;
2277
2160
  }
2278
2161
 
2279
- .dc-table-container_border_right {
2280
- border-right-width: 1px;
2162
+ .dc-calendar-day:hover > .dc-calendar-day__body {
2163
+ box-shadow: inset 0 0 0 2px var(--dc-day-border-color-hover);
2281
2164
  }
2282
2165
 
2283
- .dc-table-container_border_bottom {
2284
- border-bottom-width: 1px;
2166
+ .dc-calendar-day_selected:hover > .dc-calendar-day__body {
2167
+ background: var(--dc-day-bg-selected-hover);
2168
+ box-shadow: none;
2285
2169
  }
2286
2170
 
2287
- .dc-table-container_border_left {
2288
- border-left-width: 1px;
2171
+ .dc-calendar-day:disabled {
2172
+ cursor: default;
2289
2173
  }
2290
2174
 
2291
- .dc-table {
2292
- font: var(--dc-text-sm);
2293
- font-variant-numeric: tabular-nums;
2294
- color: var(--dc-primary-text-color);
2295
- width: 100%;
2296
- border-spacing: 0;
2297
- border-collapse: separate;
2175
+ .dc-calendar-day:disabled > .dc-calendar-day__body {
2176
+ opacity: var(--dc-disabled-state-opacity);
2177
+ box-shadow: none;
2298
2178
  }
2299
2179
 
2300
- .dc-table-head {
2180
+ .dc-calendar-day:focus {
2181
+ outline: none;
2301
2182
  }
2302
2183
 
2303
- .dc-table-body {
2184
+ .dc-calendar-day:focus > .dc-calendar-day__body {
2185
+ box-shadow: inset 0 0 0 2px var(--dc-day-border-color-hover);
2304
2186
  }
2305
2187
 
2306
- .dc-table-row {
2188
+ .dc-calendar-day_selected:focus > .dc-calendar-day__body {
2189
+ position: relative;
2190
+ box-shadow: none;
2307
2191
  }
2308
2192
 
2309
- .dc-table-cell {
2310
- box-sizing: border-box;
2311
- padding:
2312
- var(--dc-table-cell-padding-y)
2313
- var(--dc-table-cell-padding-x);
2314
- border-bottom: 1px solid var(--dc-table-border-color);
2315
- background: var(--dc-table-bg);
2193
+ .dc-calendar-day_selected:focus > .dc-calendar-day__body::after {
2194
+ content: "";
2195
+ position: absolute;
2196
+ inset: -2px;
2197
+ border-radius: 50%;
2198
+ box-shadow: 0 0 0 2px var(--dc-day-focus-ring-color);
2316
2199
  }
2317
2200
 
2318
- .dc-table-cell_head {
2319
- font-size: 90%;
2320
- font-weight: 700;
2321
- white-space: nowrap;
2322
- border-bottom-color: var(--dc-table-border-color);
2323
- }
2201
+ /* Calendar styles */
2324
2202
 
2325
- .dc-table_cell_sm .dc-table-cell {
2326
- --dc-table-cell-padding-y: 4px;
2327
- --dc-table-cell-padding-x: 8px;
2203
+ .dc-calendar {
2204
+ display: inline-flex;
2205
+ flex-direction: column;
2206
+ width: calc(7 * var(--dc-day-max-width));
2207
+ min-width: calc(7 * var(--dc-day-size));
2208
+ max-width: 100%;
2328
2209
  }
2329
2210
 
2330
- .dc-table_cell_lg .dc-table-cell {
2331
- --dc-table-cell-padding-y: 12px;
2332
- --dc-table-cell-padding-x: 16px;
2211
+ .dc-calendar__header {
2212
+ display: flex;
2213
+ align-items: center;
2214
+ justify-content: space-between;
2333
2215
  }
2334
2216
 
2335
- .dc-table-cell_sortable {
2336
- padding: 0;
2217
+ .dc-calendar__header > * {
2218
+ margin-right: 2px;
2219
+ margin-left: 2px;
2337
2220
  }
2338
2221
 
2339
- .dc-table-cell__sort-btn {
2340
- -webkit-appearance: none;
2341
- -moz-appearance: none;
2342
- appearance: none;
2343
- font: inherit;
2344
- color: inherit;
2345
- position: relative;
2346
- display: block;
2347
- cursor: pointer;
2348
- width: 100%;
2349
- margin: 0;
2350
- padding:
2351
- var(--dc-table-cell-padding-y)
2352
- var(--dc-table-cell-padding-x);
2353
- padding-right:
2354
- calc(
2355
- var(--dc-table-cell-padding-x) +
2356
- var(--dc-table-sort-icon-size) +
2357
- var(--dc-table-cell-padding-x)
2358
- );
2359
- text-align: inherit;
2360
- border: none;
2361
- background: transparent;
2222
+ .dc-calendar__header > *:first-child {
2223
+ margin-right: auto;
2224
+ margin-left: 0;
2362
2225
  }
2363
2226
 
2364
- .dc-table-cell__sort-btn:hover {
2365
- background: var(--dc-table-cell-bg-hover);
2227
+ .dc-calendar__header > *:last-child {
2228
+ margin-right: 0;
2229
+ margin-left: auto;
2366
2230
  }
2367
2231
 
2368
- .dc-table-cell__sort-btn::before {
2369
- content: "";
2370
- position: absolute;
2371
- inset: 0;
2232
+ .dc-calendar__grid {
2233
+ margin-top: 16px;
2234
+ border-spacing: 0;
2372
2235
  }
2373
2236
 
2374
- .dc-table-cell__sort-btn:focus {
2375
- outline: none;
2237
+ .dc-calendar__grid th,
2238
+ .dc-calendar__grid td {
2239
+ padding: 0;
2240
+ text-align: center;
2241
+ vertical-align: middle;
2376
2242
  }
2377
2243
 
2378
- .dc-table-cell__sort-btn:focus::before {
2379
- background: var(--dc-table-cell-bg-focus);
2244
+ .dc-calendar__grid th {
2245
+ font-size: 14px;
2246
+ font-weight: 400;
2247
+ color: var(--dc-columnheader-text-color);
2248
+ padding-bottom: 4px;
2380
2249
  }
2381
2250
 
2382
- .dc-table-cell__sort-btn:focus:not(:focus-visible)::before {
2383
- background: initial;
2251
+ .dc-calendar__grid td {
2252
+ padding-top: 4px;
2384
2253
  }
2385
2254
 
2386
- .dc-table-cell__sort-icon {
2387
- position: absolute;
2388
- top: 50%;
2389
- right: var(--dc-table-cell-padding-x);
2390
- width: var(--dc-table-sort-icon-size);
2391
- height: var(--dc-table-sort-icon-size);
2392
- transform: translateY(-50%);
2393
- }
2255
+ .dc-segmented {
2256
+ --dc-segmented-bg: var(--dc-bg-transparent-1);
2257
+ --dc-segmented-border-color: var(--dc-control-border-color);
2258
+ --dc-segmented-delimiter-color: var(--dc-border-color-transparent-3);
2259
+ --dc-segmented-btn-padding-x: 16px;
2260
+ --dc-segmented-btn-bg-checked: white;
2261
+ --dc-segmented-btn-border-color: transparent;
2262
+ --dc-segmented-btn-border-color-focus: var(--dc-blue-600);
2263
+ --dc-segmented-btn-border-color-checked: var(--dc-gray-500);
2264
+ --dc-segmented-btn-focus-ring-color: var(--dc-focus-ring-color);
2394
2265
 
2395
- .dc-table-head_tinted .dc-table-cell {
2396
- background: var(--dc-table-head-bg);
2266
+ color-scheme: light;
2267
+ font: 14px/1 var(--dc-primary-font);
2268
+ display: inline-flex;
2269
+ align-items: stretch;
2270
+ height: 36px;
2271
+ margin: 0;
2272
+ padding: 0;
2273
+ list-style: none;
2274
+ border-radius: 9px;
2275
+ background: var(--dc-segmented-bg);
2276
+ box-shadow: inset 0 0 0 1px var(--dc-segmented-border-color);
2397
2277
  }
2398
2278
 
2399
- .dc-table-row_selected .dc-table-cell {
2400
- background: var(--dc-table-row-bg-selected) !important;
2279
+ .dc-segmented_disabled {
2280
+ opacity: var(--dc-disabled-state-opacity);
2281
+ pointer-events: none;
2401
2282
  }
2402
2283
 
2403
- .dc-table_bordered .dc-table-cell:not(:last-child) {
2404
- border-right: 1px solid var(--dc-table-border-color);
2405
- }
2284
+ .dc-segmented_sm {
2285
+ --dc-segmented-btn-padding-x: 12px;
2406
2286
 
2407
- .dc-table_striped .dc-table-body .dc-table-cell {
2408
- border-bottom-color: transparent;
2287
+ font-size: 13px;
2288
+ height: 32px;
2289
+ border-radius: 8px;
2409
2290
  }
2410
2291
 
2411
- .dc-table-body .dc-table-row:last-child .dc-table-cell {
2412
- border-bottom-color: transparent;
2413
- }
2292
+ .dc-segmented_lg {
2293
+ --dc-segmented-btn-padding-x: 18px;
2414
2294
 
2415
- .dc-table_striped .dc-table-body .dc-table-row:nth-child(even) .dc-table-cell {
2416
- background: var(--dc-table-row-bg-stripped);
2295
+ font-size: 15px;
2296
+ height: 40px;
2297
+ border-radius: 10px;
2417
2298
  }
2418
2299
 
2419
- .dc-table_highlight_row .dc-table-body .dc-table-row:hover .dc-table-cell {
2420
- background: var(--dc-table-row-bg-highlighted);
2300
+ .dc-segmented__button {
2301
+ position: relative;
2302
+ display: flex;
2303
+ cursor: pointer;
2304
+ -webkit-user-select: none;
2305
+ -moz-user-select: none;
2306
+ user-select: none;
2307
+ flex: auto;
2308
+ gap: calc(var(--dc-segmented-btn-padding-x) / 2);
2309
+ align-items: center;
2310
+ justify-content: center;
2311
+ box-sizing: border-box;
2312
+ padding: 0 var(--dc-segmented-btn-padding-x);
2313
+ border: 1px solid var(--dc-segmented-btn-border-color);
2314
+ border-radius: inherit;
2421
2315
  }
2422
2316
 
2423
- /* Feedback */
2317
+ .dc-segmented__button[aria-checked="true"] {
2318
+ --dc-segmented-btn-border-color: var(--dc-segmented-btn-border-color-checked);
2424
2319
 
2425
- .dc-alert {
2426
- --dc-alert-text-color: var(--dc-gray-700);
2427
- --dc-alert-icon-color: var(--dc-gray-500);
2428
- --dc-alert-bg: rgba(229, 231, 235, 0.25); /* gray-200 */
2429
- --dc-alert-border-color: rgba(156, 163, 175, 0.25); /* gray-400 */
2430
- --dc-alert-accent-border-color: var(--dc-gray-500);
2431
- --dc-alert-icon-size: 20px;
2432
-
2433
- color-scheme: light;
2434
- font: var(--dc-text-sm);
2435
- color: var(--dc-alert-text-color);
2436
- display: grid;
2437
- grid-template-areas: "icon content";
2438
- grid-template-columns: auto 1fr;
2439
- box-sizing: border-box;
2440
- padding: 12px 16px;
2441
- text-align: left;
2442
- border: 1px solid var(--dc-alert-border-color);
2443
- border-radius: 8px;
2444
- background: var(--dc-alert-bg);
2320
+ cursor: default;
2321
+ background: var(--dc-segmented-btn-bg-checked);
2445
2322
  }
2446
2323
 
2447
- .dc-alert_has_icon {
2448
- grid-column-gap: 12px;
2449
- padding-left: 12px;
2324
+ .dc-segmented__button:focus {
2325
+ border-color: var(--dc-segmented-btn-border-color-focus);
2326
+ outline: none;
2327
+ box-shadow: 0 0 0 3px var(--dc-segmented-btn-focus-ring-color);
2450
2328
  }
2451
2329
 
2452
- .dc-alert__icon {
2453
- color: var(--dc-alert-icon-color);
2454
- display: inline-flex;
2455
- grid-area: icon;
2330
+ .dc-segmented__button:focus:not(:focus-visible) {
2331
+ border-color: var(--dc-segmented-btn-border-color);
2332
+ box-shadow: none;
2456
2333
  }
2457
2334
 
2458
- .dc-alert__body {
2459
- display: flex;
2460
- flex-direction: column;
2461
- grid-area: content;
2335
+ .dc-segmented__button + .dc-segmented__button::before {
2336
+ content: "";
2337
+ position: absolute;
2338
+ z-index: -1;
2339
+ top: 50%;
2340
+ left: -2px;
2341
+ width: 1px;
2342
+ height: 50%;
2343
+ transform: translateY(-50%);
2344
+ background: var(--dc-segmented-delimiter-color);
2462
2345
  }
2463
2346
 
2464
- .dc-alert__title {
2465
- font: inherit;
2466
- font-weight: 600;
2467
- margin: 0;
2347
+ .dc-segmented__button[aria-checked="true"]::before {
2348
+ opacity: 0;
2468
2349
  }
2469
2350
 
2470
- .dc-alert__content {
2471
- }
2351
+ .dc-label {
2352
+ --dc-label-text-color: var(--dc-primary-text-color);
2353
+ --dc-label-required-mark-color: #dc2626;
2472
2354
 
2473
- .dc-alert__body > * + * {
2474
- margin-top: 8px;
2355
+ color-scheme: light;
2356
+ font: var(--dc-text-sm);
2357
+ font-weight: 500;
2358
+ color: var(--dc-label-text-color);
2359
+ display: inline-block;
2475
2360
  }
2476
2361
 
2477
- .dc-alert_variant_full-width {
2478
- border-right: 0;
2479
- border-left: 0;
2480
- border-radius: 0;
2362
+ .dc-label_required::after {
2363
+ content: "*";
2364
+ color: var(--dc-label-required-mark-color);
2365
+ padding-left: 0.25em;
2481
2366
  }
2482
2367
 
2483
- .dc-alert_variant_accent-border {
2484
- border: none;
2485
- border-left: 4px solid var(--dc-alert-accent-border-color);
2486
- border-radius: 0;
2368
+ .dc-caption {
2369
+ color-scheme: light;
2370
+ font: var(--dc-text-sm);
2371
+ color: var(--dc-secondary-text-color);
2372
+ display: block;
2373
+ align-items: center;
2374
+ text-align: left;
2487
2375
  }
2488
2376
 
2489
- .dc-alert_appearance_warning {
2490
- --dc-alert-text-color: var(--dc-orange-700);
2491
- --dc-alert-icon-color: var(--dc-orange-600);
2492
- --dc-alert-bg: rgba(254, 215, 170, 0.2); /* orange-200 */
2493
- --dc-alert-border-color: rgba(249, 115, 22, 0.25); /* orange-500 */
2494
- --dc-alert-accent-border-color: var(--dc-orange-500);
2377
+ .dc-caption_appearance_info {
2378
+ color: var(--dc-info-text-color);
2495
2379
  }
2496
2380
 
2497
- .dc-alert_appearance_error {
2498
- --dc-alert-text-color: var(--dc-red-700);
2499
- --dc-alert-icon-color: var(--dc-red-600);
2500
- --dc-alert-bg: rgba(254, 202, 202, 0.2); /* red-200 */
2501
- --dc-alert-border-color: rgba(239, 68, 68, 0.25); /* red-500 */
2502
- --dc-alert-accent-border-color: var(--dc-red-500);
2381
+ .dc-caption_appearance_success {
2382
+ color: var(--dc-success-text-color);
2503
2383
  }
2504
2384
 
2505
- .dc-alert_appearance_info {
2506
- --dc-alert-text-color: var(--dc-blue-700);
2507
- --dc-alert-icon-color: var(--dc-blue-600);
2508
- --dc-alert-bg: rgba(191, 219, 254, 0.2); /* blue-200 */
2509
- --dc-alert-border-color: rgba(59, 130, 246, 0.25); /* blue-500 */
2510
- --dc-alert-accent-border-color: var(--dc-blue-500);
2385
+ .dc-caption_appearance_error {
2386
+ color: var(--dc-error-text-color);
2511
2387
  }
2512
2388
 
2513
- .dc-alert_appearance_success {
2514
- --dc-alert-text-color: var(--dc-green-700);
2515
- --dc-alert-icon-color: var(--dc-green-600);
2516
- --dc-alert-bg: rgba(187, 247, 208, 0.2); /* green-200 */
2517
- --dc-alert-border-color: rgba(22, 163, 74, 0.25); /* green-500 */
2518
- --dc-alert-accent-border-color: var(--dc-green-500);
2389
+ .dc-caption_appearance_warning {
2390
+ color: var(--dc-warning-text-color);
2519
2391
  }
2520
2392
 
2521
- .dc-toast {
2522
- --dc-toast-text-color: var(--dc-gray-100);
2523
- --dc-toast-secondary-text-color: var(--dc-gray-300);
2524
- --dc-toast-icon-color: var(--dc-gray-200);
2525
- --dc-toast-bg: var(--dc-gray-700);
2526
- --dc-toast-padding: 16px;
2527
- --dc-toast-close-btn-color: var(--dc-gray-50);
2528
- --dc-toast-close-btn-bg: var(--dc-gray-500);
2529
- --dc-toast-btn-text-color: var(--dc-gray-100);
2530
- --dc-toast-btn-bg: rgba(249, 250, 251, 0.15); /* gray-50 */
2531
- --dc-toast-btn-bg-hover: rgba(249, 250, 251, 0.3); /* gray-50 */
2532
- --dc-toast-btn-focus-ring-color: var(--dc-gray-200);
2393
+ .dc-caption__icon {
2394
+ color: inherit;
2395
+ float: left;
2396
+ width: 20px;
2397
+ height: 20px;
2398
+ margin-right: 0.5em;
2399
+ }
2533
2400
 
2401
+ .dc-selection-control {
2534
2402
  color-scheme: light;
2535
- font: var(--dc-text-sm);
2536
- color: var(--dc-toast-text-color);
2537
- position: relative;
2538
- display: inline-flex;
2539
- min-width: 256px;
2540
- text-align: left;
2541
- border-radius: 10px;
2542
- background: var(--dc-toast-bg);
2543
- box-shadow: var(--dc-shadow-lg);
2403
+ display: grid;
2404
+ grid-template-areas:
2405
+ "input label"
2406
+ ". caption";
2407
+ grid-template-columns: auto 1fr;
2408
+ grid-gap: 2px 12px;
2409
+ justify-items: start;
2544
2410
  }
2545
2411
 
2546
- .dc-toast__close-btn {
2547
- -webkit-appearance: none;
2548
- -moz-appearance: none;
2549
- appearance: none;
2550
- color: var(--dc-toast-close-btn-color);
2551
- position: absolute;
2552
- top: -8px;
2553
- left: -8px;
2554
- display: inline-flex;
2555
- opacity: 0;
2556
- cursor: pointer;
2557
- align-items: center;
2558
- justify-content: center;
2559
- box-sizing: border-box;
2560
- width: 24px;
2561
- height: 24px;
2562
- padding: 0;
2563
- pointer-events: none;
2564
- transition: opacity 150ms ease;
2565
- border: none;
2566
- border-radius: 50%;
2567
- background: var(--dc-toast-close-btn-bg);
2568
- box-shadow:
2569
- var(--dc-shadow-sm),
2570
- var(--dc-shadow-md);
2412
+ .dc-selection-control__input {
2413
+ grid-area: input;
2571
2414
  }
2572
2415
 
2573
- .dc-toast:hover .dc-toast__close-btn {
2574
- opacity: 1;
2575
- pointer-events: all;
2416
+ .dc-selection-control__label {
2417
+ -webkit-user-select: none;
2418
+ -moz-user-select: none;
2419
+ user-select: none;
2420
+ grid-area: label;
2421
+ align-self: center;
2576
2422
  }
2577
2423
 
2578
- .dc-toast__btn {
2579
- -webkit-appearance: none;
2580
- -moz-appearance: none;
2581
- appearance: none;
2582
- font: var(--dc-text-xs);
2583
- color: var(--dc-toast-btn-text-color);
2584
- cursor: pointer;
2585
- box-sizing: border-box;
2586
- padding: 4px 12px;
2587
- transition: 100ms ease;
2588
- transition-property: background-color, box-shadow;
2589
- border: none;
2590
- border-radius: 6px;
2591
- background: var(--dc-toast-btn-bg);
2424
+ .dc-selection-control__caption {
2425
+ grid-area: caption;
2592
2426
  }
2593
2427
 
2594
- .dc-toast__btn:hover {
2595
- background: var(--dc-toast-btn-bg-hover);
2428
+ .dc-form-field {
2429
+ color-scheme: light;
2430
+ display: block;
2431
+ text-align: left;
2596
2432
  }
2597
2433
 
2598
- .dc-toast__btn:focus {
2599
- outline: none;
2600
- background: var(--dc-toast-btn-bg-hover);
2601
- box-shadow: 0 0 0 1px var(--dc-toast-btn-focus-ring-color);
2434
+ .dc-form-field__label {
2435
+ margin-bottom: 4px;
2602
2436
  }
2603
2437
 
2604
- .dc-toast__btn:focus:not(:focus-visible) {
2605
- box-shadow: none;
2438
+ .dc-form-field__error,
2439
+ .dc-form-field__caption {
2440
+ display: block;
2441
+ margin-top: 4px;
2606
2442
  }
2607
2443
 
2608
- .dc-toast__btn:focus:not(:focus-visible, :hover) {
2609
- background: var(--dc-toast-btn-bg);
2444
+ .dc-color-picker {
2445
+ --dc-color-picker-btn-size: 24px;
2446
+ --dc-color-picker-btn-color: var(--dc-control-on-primary-color);
2447
+ --dc-color-picker-btn-check-color: white;
2448
+ --dc-color-picker-btn-inner-border-color: rgba(0, 0, 0, 0.05);
2449
+ --dc-color-picker-btn-focus-ring-color: var(--dc-focus-ring-color);
2450
+
2451
+ color-scheme: light;
2452
+ display: inline-flex;
2453
+ flex-wrap: wrap;
2454
+ gap: 12px;
2455
+ align-items: center;
2456
+ justify-content: flex-start;
2457
+ margin: 0;
2458
+ padding: 0;
2459
+ border: none;
2610
2460
  }
2611
2461
 
2612
- .dc-toast__body {
2613
- display: flex;
2614
- flex-grow: 1;
2615
- align-items: flex-start;
2616
- padding: 12px 16px;
2462
+ .dc-color-picker_disabled {
2463
+ opacity: var(--dc-disabled-state-opacity);
2617
2464
  }
2618
2465
 
2619
- .dc-toast__actions {
2620
- display: flex;
2621
- flex-direction: column;
2622
- box-sizing: border-box;
2623
- padding: 4px;
2466
+ .dc-color-picker__btn {
2467
+ font-size: 0;
2468
+ color: transparent;
2469
+ position: relative;
2470
+ display: inline-flex;
2471
+ cursor: pointer;
2472
+ flex: none;
2473
+ align-items: center;
2474
+ justify-content: center;
2475
+ width: var(--dc-color-picker-btn-size);
2476
+ height: var(--dc-color-picker-btn-size);
2477
+ border-radius: 50%;
2478
+ background: var(--dc-color-picker-btn-color);
2479
+ box-shadow: inset 0 0 0 1px var(--dc-color-picker-btn-inner-border-color);
2624
2480
  }
2625
2481
 
2626
- .dc-toast__actions > * + * {
2627
- margin-top: 2px;
2482
+ .dc-color-picker_disabled .dc-color-picker__btn {
2483
+ cursor: default;
2628
2484
  }
2629
2485
 
2630
- .dc-toast__content {
2631
- box-sizing: border-box;
2486
+ .dc-color-picker__btn > input {
2487
+ position: absolute;
2488
+ overflow: hidden;
2489
+ -webkit-clip-path: inset(50%);
2490
+ clip-path: inset(50%);
2491
+ width: 1px;
2492
+ height: 1px;
2493
+ white-space: nowrap;
2494
+ clip: rect(0 0 0 0);
2495
+ }
2496
+
2497
+ .dc-color-picker__btn_checked::after {
2498
+ content: "";
2499
+ display: inline-block;
2500
+ width: 38%;
2501
+ height: 38%;
2502
+ border-radius: 50%;
2503
+ background: var(--dc-color-picker-btn-check-color);
2504
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
2632
2505
  }
2633
2506
 
2634
- .dc-toast__icon {
2635
- color: var(--dc-toast-icon-color);
2636
- display: inline-flex;
2637
- flex-shrink: 0;
2638
- margin-right: 12px;
2507
+ .dc-color-picker__btn:focus-within::before {
2508
+ content: "";
2509
+ position: absolute;
2510
+ z-index: -1;
2511
+ inset: -2px;
2512
+ display: inline-block;
2513
+ border-radius: 50%;
2514
+ box-shadow: 0 0 0 3px var(--dc-color-picker-btn-focus-ring-color);
2639
2515
  }
2640
2516
 
2641
- .dc-toast__title {
2642
- font: inherit;
2643
- font-weight: 500;
2644
- margin: 0;
2517
+ .dc-date-picker-popover {
2518
+ color-scheme: light;
2645
2519
  }
2646
2520
 
2647
- .dc-toast__message {
2648
- color: var(--dc-toast-secondary-text-color);
2649
- margin-top: 0.25em;
2521
+ .dc-date-range-picker-popover {
2522
+ color-scheme: light;
2523
+ display: inline-grid;
2524
+ grid-template-areas:
2525
+ "presets calendar"
2526
+ "footer footer";
2527
+ grid-template-columns: 1fr 1fr;
2528
+ grid-gap: 20px 24px;
2650
2529
  }
2651
2530
 
2652
- .dc-toasts-list {
2653
- --dc-toaster-padding: 16px;
2654
- --dc-toaster-animation: 200ms ease;
2531
+ .dc-date-range-picker-popover_compact {
2532
+ grid-template-areas:
2533
+ "presets"
2534
+ "calendar"
2535
+ "footer";
2536
+ grid-template-columns: 100%;
2537
+ max-width: 100%;
2538
+ }
2655
2539
 
2656
- color-scheme: light;
2657
- position: fixed;
2658
- z-index: var(--dc-toaster-z-index);
2659
- right: var(--dc-toaster-padding);
2660
- left: var(--dc-toaster-padding);
2661
- box-sizing: border-box;
2540
+ .dc-date-range-picker-popover__presets {
2541
+ grid-area: presets;
2662
2542
  margin: 0;
2663
2543
  padding: 0;
2664
2544
  list-style: none;
2665
- pointer-events: none;
2666
2545
  }
2667
2546
 
2668
- .dc-toasts-list_top-left,
2669
- .dc-toasts-list_top-center,
2670
- .dc-toasts-list_top-right {
2671
- top: var(--dc-toaster-padding);
2547
+ .dc-date-range-picker-popover__presets > * {
2548
+ white-space: nowrap;
2672
2549
  }
2673
2550
 
2674
- .dc-toasts-list_bottom-left,
2675
- .dc-toasts-list_bottom-center,
2676
- .dc-toasts-list_bottom-right {
2677
- bottom: var(--dc-toaster-padding);
2551
+ .dc-date-range-picker-popover__presets > * + * {
2552
+ margin-top: 8px;
2678
2553
  }
2679
2554
 
2680
- .dc-toasts-list > * {
2681
- position: absolute;
2682
- right: 0;
2683
- left: 0;
2684
- transition: transform var(--dc-toaster-animation);
2555
+ .dc-date-range-picker-popover__calendar {
2556
+ grid-area: calendar;
2685
2557
  }
2686
2558
 
2687
- .dc-toasts-list_top-left > *,
2688
- .dc-toasts-list_bottom-left > * {
2689
- text-align: left;
2559
+ .dc-date-range-picker-popover__footer {
2560
+ font: var(--dc-text-xs);
2561
+ display: grid;
2562
+ grid-area: footer;
2563
+ grid-template-areas: "content cancel confirm";
2564
+ grid-template-columns: 1fr auto auto;
2565
+ grid-gap: 8px;
2566
+ align-items: center;
2690
2567
  }
2691
2568
 
2692
- .dc-toasts-list_top-center > *,
2693
- .dc-toasts-list_bottom-center > * {
2694
- text-align: center;
2569
+ .dc-date-range-picker-popover__footer-content {
2570
+ grid-area: content;
2695
2571
  }
2696
2572
 
2697
- .dc-toasts-list_top-right > *,
2698
- .dc-toasts-list_bottom-right > * {
2699
- text-align: right;
2573
+ .dc-date-range-picker-popover__footer-cancel {
2574
+ grid-area: cancel;
2700
2575
  }
2701
2576
 
2702
- .dc-toasts-list__toast {
2703
- pointer-events: all;
2704
- animation: var(--dc-toaster-animation) forwards;
2577
+ .dc-date-range-picker-popover__footer-confirm {
2578
+ grid-area: confirm;
2705
2579
  }
2706
2580
 
2707
- @keyframes dc-toast-slide-top {
2708
- 0% {
2709
- opacity: 0;
2710
- transform: translateY(-100%);
2711
- }
2712
-
2713
- 100% {
2714
- opacity: 1;
2715
- transform: translateY(0);
2716
- }
2581
+ .dc-date-range-picker-popover_compact .dc-date-range-picker-popover__footer {
2582
+ grid-template-areas:
2583
+ "content content"
2584
+ "cancel confirm";
2585
+ grid-template-columns: 1fr 1fr;
2586
+ text-align: right;
2717
2587
  }
2718
2588
 
2719
- .dc-toasts-list_top-left .dc-toasts-list__toast,
2720
- .dc-toasts-list_top-center .dc-toasts-list__toast,
2721
- .dc-toasts-list_top-right .dc-toasts-list__toast {
2722
- animation-name: dc-toast-slide-top;
2723
- }
2589
+ /* Data display */
2724
2590
 
2725
- @keyframes dc-toast-slide-bottom {
2726
- 0% {
2727
- opacity: 0;
2728
- transform: translateY(0);
2729
- }
2591
+ .dc-table-container,
2592
+ .dc-table {
2593
+ --dc-table-border-color: var(--dc-border-color-transparent-2);
2594
+ --dc-table-bg: none;
2595
+ --dc-table-head-bg: var(--dc-bg-transparent-1);
2596
+ --dc-table-row-bg-stripped: var(--dc-bg-transparent-1);
2597
+ --dc-table-row-bg-selected: var(--dc-bg-transparent-1);
2598
+ --dc-table-row-bg-highlighted: var(--dc-bg-transparent-1);
2599
+ --dc-table-cell-bg-hover: var(--dc-bg-transparent-1);
2600
+ --dc-table-cell-bg-focus: var(--dc-bg-transparent-1);
2601
+ --dc-table-cell-padding-x: 12px;
2602
+ --dc-table-cell-padding-y: 8px;
2603
+ --dc-table-sort-icon-size: 16px;
2730
2604
 
2731
- 100% {
2732
- opacity: 1;
2733
- transform: translateY(-100%);
2734
- }
2605
+ color-scheme: light;
2735
2606
  }
2736
2607
 
2737
- .dc-toasts-list_bottom-left .dc-toasts-list__toast,
2738
- .dc-toasts-list_bottom-center .dc-toasts-list__toast,
2739
- .dc-toasts-list_bottom-right .dc-toasts-list__toast {
2740
- animation-name: dc-toast-slide-bottom;
2608
+ .dc-table-container {
2609
+ overflow-x: auto;
2610
+ box-sizing: border-box;
2611
+ width: 100%;
2612
+ border: 0 solid var(--dc-table-border-color);
2741
2613
  }
2742
2614
 
2743
- .dc-empty-state {
2744
- --dc-empty-state-inner-width: 640px;
2745
- --dc-empty-state-primary-color: var(--dc-primary-text-color);
2746
- --dc-empty-state-secondary-color: var(--dc-secondary-text-color);
2615
+ .dc-table-container_border_all {
2616
+ border-width: 1px;
2617
+ }
2747
2618
 
2748
- color-scheme: light;
2749
- font: var(--dc-text-sm);
2750
- display: flex;
2751
- flex-direction: column;
2752
- align-items: center;
2753
- justify-content: center;
2754
- box-sizing: border-box;
2755
- padding: 16px;
2756
- text-align: center;
2619
+ .dc-table-container_border_top {
2620
+ border-top-width: 1px;
2757
2621
  }
2758
2622
 
2759
- .dc-empty-state__image {
2760
- color: var(--dc-empty-state-secondary-color);
2623
+ .dc-table-container_border_right {
2624
+ border-right-width: 1px;
2761
2625
  }
2762
2626
 
2763
- .dc-empty-state__heading,
2764
- .dc-empty-state__description {
2765
- max-width: var(--dc-empty-state-inner-width);
2766
- margin: 0;
2627
+ .dc-table-container_border_bottom {
2628
+ border-bottom-width: 1px;
2767
2629
  }
2768
2630
 
2769
- .dc-empty-state__heading {
2770
- font: 600 var(--dc-text-lg);
2631
+ .dc-table-container_border_left {
2632
+ border-left-width: 1px;
2771
2633
  }
2772
2634
 
2773
- .dc-empty-state__description {
2774
- color: var(--dc-empty-state-secondary-color);
2635
+ .dc-table {
2636
+ font: var(--dc-text-sm);
2637
+ font-variant-numeric: tabular-nums;
2638
+ color: var(--dc-primary-text-color);
2639
+ width: 100%;
2640
+ border-spacing: 0;
2641
+ border-collapse: separate;
2775
2642
  }
2776
2643
 
2777
- * + .dc-empty-state__heading,
2778
- * + .dc-empty-state__description {
2779
- margin-top: 8px;
2644
+ .dc-table-head {
2780
2645
  }
2781
2646
 
2782
- .dc-empty-state__heading + .dc-empty-state__description {
2783
- margin-top: 4px;
2647
+ .dc-table-body {
2784
2648
  }
2785
2649
 
2786
- * + .dc-empty-state__primary-action,
2787
- * + .dc-empty-state__secondary-action {
2788
- margin-top: 24px;
2650
+ .dc-table-row {
2789
2651
  }
2790
2652
 
2791
- .dc-empty-state__primary-action + .dc-empty-state__secondary-action {
2792
- margin-top: 12px;
2653
+ .dc-table-cell {
2654
+ box-sizing: border-box;
2655
+ padding:
2656
+ var(--dc-table-cell-padding-y)
2657
+ var(--dc-table-cell-padding-x);
2658
+ border-bottom: 1px solid var(--dc-table-border-color);
2659
+ background: var(--dc-table-bg);
2793
2660
  }
2794
2661
 
2795
- .dc-empty-state__content {
2662
+ .dc-table-cell_head {
2663
+ font-size: 90%;
2664
+ font-weight: 700;
2665
+ white-space: nowrap;
2666
+ border-bottom-color: var(--dc-table-border-color);
2796
2667
  }
2797
2668
 
2798
- /* Navigation */
2669
+ .dc-table_cell_sm .dc-table-cell {
2670
+ --dc-table-cell-padding-y: 4px;
2671
+ --dc-table-cell-padding-x: 8px;
2672
+ }
2799
2673
 
2800
- .dc-tabs {
2801
- --dc-tablist-border-color: var(--dc-border-color-transparent-2);
2802
- --dc-tab-text-color: var(--dc-primary-text-color);
2803
- --dc-tab-accent-color: var(--dc-primary-color);
2804
- --dc-tab-bg: none;
2805
- --dc-tab-bg-hover: var(--dc-bg-transparent-1);
2806
- --dc-tab-focus-ring-color: var(--dc-focus-ring-color);
2674
+ .dc-table_cell_lg .dc-table-cell {
2675
+ --dc-table-cell-padding-y: 12px;
2676
+ --dc-table-cell-padding-x: 16px;
2677
+ }
2807
2678
 
2808
- color-scheme: light;
2679
+ .dc-table-cell_sortable {
2680
+ padding: 0;
2809
2681
  }
2810
2682
 
2811
- .dc-tab {
2683
+ .dc-table-cell__sort-btn {
2812
2684
  -webkit-appearance: none;
2813
2685
  -moz-appearance: none;
2814
2686
  appearance: none;
2815
- font: var(--dc-text-sm);
2816
- color: var(--dc-tab-text-color);
2687
+ font: inherit;
2688
+ color: inherit;
2817
2689
  position: relative;
2690
+ display: block;
2818
2691
  cursor: pointer;
2692
+ width: 100%;
2819
2693
  margin: 0;
2820
- padding: 0;
2694
+ padding:
2695
+ var(--dc-table-cell-padding-y)
2696
+ var(--dc-table-cell-padding-x);
2697
+ padding-right:
2698
+ calc(
2699
+ var(--dc-table-cell-padding-x) +
2700
+ var(--dc-table-sort-icon-size) +
2701
+ var(--dc-table-cell-padding-x)
2702
+ );
2703
+ text-align: inherit;
2821
2704
  border: none;
2822
- background: none;
2705
+ background: transparent;
2823
2706
  }
2824
2707
 
2825
- .dc-tab:focus {
2826
- outline: none;
2708
+ .dc-table-cell__sort-btn:hover {
2709
+ background: var(--dc-table-cell-bg-hover);
2827
2710
  }
2828
2711
 
2829
- .dc-tab[aria-selected="true"]::after {
2712
+ .dc-table-cell__sort-btn::before {
2830
2713
  content: "";
2831
2714
  position: absolute;
2832
- bottom: 0;
2833
- left: 0;
2834
- width: 100%;
2835
- height: 2px;
2836
- border-radius: 1px;
2837
- background: var(--dc-blue-500);
2715
+ inset: 0;
2838
2716
  }
2839
2717
 
2840
- .dc-tab__layout {
2841
- display: flex;
2842
- align-items: center;
2843
- justify-content: center;
2844
- height: 32px;
2845
- margin-bottom: 8px;
2846
- padding-right: 8px;
2847
- padding-left: 8px;
2848
- border-radius: 8px;
2849
- background: var(--dc-tab-bg);
2718
+ .dc-table-cell__sort-btn:focus {
2719
+ outline: none;
2850
2720
  }
2851
2721
 
2852
- .dc-tab:hover .dc-tab__layout {
2853
- background: var(--dc-tab-bg-hover);
2722
+ .dc-table-cell__sort-btn:focus::before {
2723
+ background: var(--dc-table-cell-bg-focus);
2854
2724
  }
2855
2725
 
2856
- .dc-tab:focus .dc-tab__layout {
2857
- box-shadow: inset 0 0 0 3px var(--dc-tab-focus-ring-color);
2726
+ .dc-table-cell__sort-btn:focus:not(:focus-visible)::before {
2727
+ background: initial;
2858
2728
  }
2859
2729
 
2860
- .dc-tab:focus:not(:focus-visible) .dc-tab__layout {
2861
- box-shadow: none;
2730
+ .dc-table-cell__sort-icon {
2731
+ position: absolute;
2732
+ top: 50%;
2733
+ right: var(--dc-table-cell-padding-x);
2734
+ width: var(--dc-table-sort-icon-size);
2735
+ height: var(--dc-table-sort-icon-size);
2736
+ transform: translateY(-50%);
2862
2737
  }
2863
2738
 
2864
- .dc-tab__icon {
2865
- display: inline-flex;
2866
- margin-right: 8px;
2739
+ .dc-table-head_tinted .dc-table-cell {
2740
+ background: var(--dc-table-head-bg);
2867
2741
  }
2868
2742
 
2869
- .dc-tab__label {
2870
- white-space: nowrap;
2743
+ .dc-table-row_selected .dc-table-cell {
2744
+ background: var(--dc-table-row-bg-selected) !important;
2871
2745
  }
2872
2746
 
2873
- .dc-tab__counter {
2874
- margin-left: 12px;
2747
+ .dc-table_bordered .dc-table-cell:not(:last-child) {
2748
+ border-right: 1px solid var(--dc-table-border-color);
2875
2749
  }
2876
2750
 
2877
- .dc-tab-list {
2878
- display: flex;
2879
- overflow-x: auto;
2880
- align-items: center;
2881
- box-sizing: border-box;
2882
- max-width: 100%;
2883
- box-shadow: inset 0 -1px 0 var(--dc-tablist-border-color);
2751
+ .dc-table_striped .dc-table-body .dc-table-cell {
2752
+ border-bottom-color: transparent;
2884
2753
  }
2885
2754
 
2886
- .dc-tab-list > * + * {
2887
- margin-left: 16px;
2755
+ .dc-table-body .dc-table-row:last-child .dc-table-cell {
2756
+ border-bottom-color: transparent;
2888
2757
  }
2889
2758
 
2890
- .dc-menu {
2891
- --dc-menu-item-color: var(--dc-button-default-plain-text-color);
2892
- --dc-menu-item-bg: var(--dc-button-default-bg-hover);
2893
- --dc-menu-item-color-destructive: var(--dc-button-danger-plain-text-color);
2894
- --dc-menu-item-bg-destructive: var(--dc-button-danger-plain-bg-hover);
2895
- --dc-menu-separator-color: var(--dc-bg-transparent-2);
2759
+ .dc-table_striped .dc-table-body .dc-table-row:nth-child(even) .dc-table-cell {
2760
+ background: var(--dc-table-row-bg-stripped);
2761
+ }
2762
+
2763
+ .dc-table_highlight_row .dc-table-body .dc-table-row:hover .dc-table-cell {
2764
+ background: var(--dc-table-row-bg-highlighted);
2765
+ }
2766
+
2767
+ /* Feedback */
2768
+
2769
+ .dc-alert {
2770
+ --dc-alert-text-color: var(--dc-gray-700);
2771
+ --dc-alert-icon-color: var(--dc-gray-500);
2772
+ --dc-alert-bg: rgba(229, 231, 235, 0.25); /* gray-200 */
2773
+ --dc-alert-border-color: rgba(156, 163, 175, 0.25); /* gray-400 */
2774
+ --dc-alert-accent-border-color: var(--dc-gray-500);
2775
+ --dc-alert-icon-size: 20px;
2896
2776
 
2897
2777
  color-scheme: light;
2778
+ font: var(--dc-text-sm);
2779
+ color: var(--dc-alert-text-color);
2780
+ display: grid;
2781
+ grid-template-areas: "icon content";
2782
+ grid-template-columns: auto 1fr;
2898
2783
  box-sizing: border-box;
2899
- width: 100%;
2900
- margin: 0;
2901
- padding: 0;
2902
- list-style: none;
2784
+ padding: 12px 16px;
2785
+ text-align: left;
2786
+ border: 1px solid var(--dc-alert-border-color);
2787
+ border-radius: 8px;
2788
+ background: var(--dc-alert-bg);
2903
2789
  }
2904
2790
 
2905
- .dc-menu__container {
2906
- min-width: 160px;
2907
- padding: 4px;
2791
+ .dc-alert_has_icon {
2792
+ grid-column-gap: 12px;
2793
+ padding-left: 12px;
2908
2794
  }
2909
2795
 
2910
- .dc-menu__separator {
2911
- box-sizing: border-box;
2912
- height: 1px;
2913
- margin: 4px 8px;
2914
- background: var(--dc-menu-separator-color);
2796
+ .dc-alert__icon {
2797
+ color: var(--dc-alert-icon-color);
2798
+ display: inline-flex;
2799
+ grid-area: icon;
2915
2800
  }
2916
2801
 
2917
- .dc-menu-btn {
2918
- -webkit-appearance: none;
2919
- -moz-appearance: none;
2920
- appearance: none;
2921
- font: var(--dc-text-sm);
2922
- color: var(--dc-menu-item-color);
2802
+ .dc-alert__body {
2923
2803
  display: flex;
2924
- -webkit-user-select: none;
2925
- -moz-user-select: none;
2926
- user-select: none;
2927
- align-items: center;
2928
- width: 100%;
2929
- height: 32px;
2930
- padding: 0 12px;
2931
- white-space: nowrap;
2932
- border: none;
2933
- border-radius: 6px;
2934
- background: transparent;
2804
+ flex-direction: column;
2805
+ grid-area: content;
2935
2806
  }
2936
2807
 
2937
- .dc-menu-btn:hover {
2938
- cursor: pointer;
2808
+ .dc-alert__title {
2809
+ font: inherit;
2810
+ font-weight: 600;
2811
+ margin: 0;
2939
2812
  }
2940
2813
 
2941
- .dc-menu-btn:focus {
2942
- outline: none;
2943
- background: var(--dc-menu-item-bg);
2814
+ .dc-alert__content {
2944
2815
  }
2945
2816
 
2946
- .dc-menu-btn__icon {
2947
- display: inline-flex;
2948
- margin-right: 8px;
2817
+ .dc-alert__body > * + * {
2818
+ margin-top: 8px;
2949
2819
  }
2950
2820
 
2951
- .dc-menu-btn_destructive {
2952
- color: var(--dc-menu-item-color-destructive);
2821
+ .dc-alert_variant_full-width {
2822
+ border-right: 0;
2823
+ border-left: 0;
2824
+ border-radius: 0;
2953
2825
  }
2954
2826
 
2955
- .dc-menu-btn_destructive:focus {
2956
- background: var(--dc-menu-item-bg-destructive);
2827
+ .dc-alert_variant_accent-border {
2828
+ border: none;
2829
+ border-left: 4px solid var(--dc-alert-accent-border-color);
2830
+ border-radius: 0;
2957
2831
  }
2958
2832
 
2959
- .dc-nav-list {
2960
- --dc-nav-list-title-color: var(--dc-secondary-text-color);
2961
- --dc-nav-link-text-color: var(--dc-primary-text-color);
2962
- --dc-nav-link-bg: transparent;
2963
- --dc-nav-link-bg-hover: var(--dc-bg-transparent-2);
2964
- --dc-nav-link-bg-active: var(--dc-bg-transparent-2);
2965
- --dc-nav-link-focus-ring-color: var(--dc-focus-ring-color);
2833
+ .dc-alert_appearance_warning {
2834
+ --dc-alert-text-color: var(--dc-orange-700);
2835
+ --dc-alert-icon-color: var(--dc-orange-600);
2836
+ --dc-alert-bg: rgba(254, 215, 170, 0.2); /* orange-200 */
2837
+ --dc-alert-border-color: rgba(249, 115, 22, 0.25); /* orange-500 */
2838
+ --dc-alert-accent-border-color: var(--dc-orange-500);
2839
+ }
2840
+
2841
+ .dc-alert_appearance_error {
2842
+ --dc-alert-text-color: var(--dc-red-700);
2843
+ --dc-alert-icon-color: var(--dc-red-600);
2844
+ --dc-alert-bg: rgba(254, 202, 202, 0.2); /* red-200 */
2845
+ --dc-alert-border-color: rgba(239, 68, 68, 0.25); /* red-500 */
2846
+ --dc-alert-accent-border-color: var(--dc-red-500);
2847
+ }
2848
+
2849
+ .dc-alert_appearance_info {
2850
+ --dc-alert-text-color: var(--dc-blue-700);
2851
+ --dc-alert-icon-color: var(--dc-blue-600);
2852
+ --dc-alert-bg: rgba(191, 219, 254, 0.2); /* blue-200 */
2853
+ --dc-alert-border-color: rgba(59, 130, 246, 0.25); /* blue-500 */
2854
+ --dc-alert-accent-border-color: var(--dc-blue-500);
2855
+ }
2856
+
2857
+ .dc-alert_appearance_success {
2858
+ --dc-alert-text-color: var(--dc-green-700);
2859
+ --dc-alert-icon-color: var(--dc-green-600);
2860
+ --dc-alert-bg: rgba(187, 247, 208, 0.2); /* green-200 */
2861
+ --dc-alert-border-color: rgba(22, 163, 74, 0.25); /* green-500 */
2862
+ --dc-alert-accent-border-color: var(--dc-green-500);
2863
+ }
2864
+
2865
+ .dc-toast {
2866
+ --dc-toast-text-color: var(--dc-gray-100);
2867
+ --dc-toast-secondary-text-color: var(--dc-gray-300);
2868
+ --dc-toast-icon-color: var(--dc-gray-200);
2869
+ --dc-toast-bg: var(--dc-gray-700);
2870
+ --dc-toast-padding: 16px;
2871
+ --dc-toast-close-btn-color: var(--dc-gray-50);
2872
+ --dc-toast-close-btn-bg: var(--dc-gray-500);
2873
+ --dc-toast-btn-text-color: var(--dc-gray-100);
2874
+ --dc-toast-btn-bg: rgba(249, 250, 251, 0.15); /* gray-50 */
2875
+ --dc-toast-btn-bg-hover: rgba(249, 250, 251, 0.3); /* gray-50 */
2876
+ --dc-toast-btn-focus-ring-color: var(--dc-gray-200);
2966
2877
 
2967
2878
  color-scheme: light;
2879
+ font: var(--dc-text-sm);
2880
+ color: var(--dc-toast-text-color);
2881
+ position: relative;
2882
+ display: inline-flex;
2883
+ min-width: 256px;
2884
+ text-align: left;
2885
+ border-radius: 10px;
2886
+ background: var(--dc-toast-bg);
2887
+ box-shadow: var(--dc-shadow-lg);
2968
2888
  }
2969
2889
 
2970
- .dc-nav-list__items {
2971
- margin: 0;
2890
+ .dc-toast__close-btn {
2891
+ -webkit-appearance: none;
2892
+ -moz-appearance: none;
2893
+ appearance: none;
2894
+ color: var(--dc-toast-close-btn-color);
2895
+ position: absolute;
2896
+ top: -8px;
2897
+ left: -8px;
2898
+ display: inline-flex;
2899
+ opacity: 0;
2900
+ cursor: pointer;
2901
+ align-items: center;
2902
+ justify-content: center;
2903
+ box-sizing: border-box;
2904
+ width: 24px;
2905
+ height: 24px;
2972
2906
  padding: 0;
2973
- list-style: none;
2907
+ pointer-events: none;
2908
+ transition: opacity 150ms ease;
2909
+ border: none;
2910
+ border-radius: 50%;
2911
+ background: var(--dc-toast-close-btn-bg);
2912
+ box-shadow:
2913
+ var(--dc-shadow-sm),
2914
+ var(--dc-shadow-md);
2915
+ }
2916
+
2917
+ .dc-toast:hover .dc-toast__close-btn {
2918
+ opacity: 1;
2919
+ pointer-events: all;
2974
2920
  }
2975
2921
 
2976
- .dc-nav-list__title,
2977
- .dc-nav-link {
2922
+ .dc-toast__btn {
2923
+ -webkit-appearance: none;
2924
+ -moz-appearance: none;
2925
+ appearance: none;
2926
+ font: var(--dc-text-xs);
2927
+ color: var(--dc-toast-btn-text-color);
2928
+ cursor: pointer;
2978
2929
  box-sizing: border-box;
2979
- padding: 0 12px;
2930
+ padding: 4px 12px;
2931
+ transition: 100ms ease;
2932
+ transition-property: background-color, box-shadow;
2933
+ border: none;
2934
+ border-radius: 6px;
2935
+ background: var(--dc-toast-btn-bg);
2980
2936
  }
2981
2937
 
2982
- .dc-nav-list__title {
2983
- font: 500 var(--dc-text-xs);
2984
- color: var(--dc-nav-list-title-color);
2938
+ .dc-toast__btn:hover {
2939
+ background: var(--dc-toast-btn-bg-hover);
2985
2940
  }
2986
2941
 
2987
- * + .dc-nav-list__title {
2988
- margin-top: 20px;
2942
+ .dc-toast__btn:focus {
2943
+ outline: none;
2944
+ background: var(--dc-toast-btn-bg-hover);
2945
+ box-shadow: 0 0 0 1px var(--dc-toast-btn-focus-ring-color);
2989
2946
  }
2990
2947
 
2991
- * + .dc-nav-list__item {
2992
- margin-top: 2px;
2948
+ .dc-toast__btn:focus:not(:focus-visible) {
2949
+ box-shadow: none;
2993
2950
  }
2994
2951
 
2995
- .dc-nav-link {
2996
- font: var(--dc-text-sm);
2997
- color: var(--dc-nav-link-text-color);
2998
- display: flex;
2999
- cursor: pointer;
3000
- align-items: center;
3001
- height: 36px;
3002
- white-space: nowrap;
3003
- text-decoration: none;
3004
- border-radius: 8px;
2952
+ .dc-toast__btn:focus:not(:focus-visible, :hover) {
2953
+ background: var(--dc-toast-btn-bg);
3005
2954
  }
3006
2955
 
3007
- .dc-nav-link:hover {
3008
- background: var(--dc-nav-link-bg-hover);
2956
+ .dc-toast__body {
2957
+ display: flex;
2958
+ flex-grow: 1;
2959
+ align-items: flex-start;
2960
+ padding: 12px 16px;
3009
2961
  }
3010
2962
 
3011
- .dc-nav-link:focus {
3012
- outline: none;
3013
- box-shadow: 0 0 0 2px var(--dc-nav-link-focus-ring-color);
2963
+ .dc-toast__actions {
2964
+ display: flex;
2965
+ flex-direction: column;
2966
+ box-sizing: border-box;
2967
+ padding: 4px;
3014
2968
  }
3015
2969
 
3016
- .dc-nav-link:focus:not(:focus-visible) {
3017
- box-shadow: none;
2970
+ .dc-toast__actions > * + * {
2971
+ margin-top: 2px;
3018
2972
  }
3019
2973
 
3020
- .dc-nav-link.active,
3021
- .dc-nav-link[aria-current="page"],
3022
- .dc-nav-link[aria-current="step"],
3023
- .dc-nav-link[aria-current="true"] {
3024
- background: var(--dc-nav-link-bg-active);
2974
+ .dc-toast__content {
2975
+ box-sizing: border-box;
3025
2976
  }
3026
2977
 
3027
- .dc-nav-link__icon {
2978
+ .dc-toast__icon {
2979
+ color: var(--dc-toast-icon-color);
3028
2980
  display: inline-flex;
3029
- margin-right: 8px;
2981
+ flex-shrink: 0;
2982
+ margin-right: 12px;
3030
2983
  }
3031
2984
 
3032
- .dc-nav-link__text {
3033
- overflow: hidden;
3034
- flex-grow: 1;
3035
- grid-area: text;
3036
- min-width: 0;
3037
- text-overflow: ellipsis;
2985
+ .dc-toast__title {
2986
+ font: inherit;
2987
+ font-weight: 500;
2988
+ margin: 0;
3038
2989
  }
3039
2990
 
3040
- .dc-nav-link__badge {
3041
- margin-left: 8px;
2991
+ .dc-toast__message {
2992
+ color: var(--dc-toast-secondary-text-color);
2993
+ margin-top: 0.25em;
3042
2994
  }
3043
2995
 
3044
- .dc-breadcrumbs {
3045
- --dc-breadcrumbs-text-color: var(--dc-secondary-text-color);
3046
- --dc-breadcrumbs-text-color-hover: var(--dc-primary-text-color);
3047
- --dc-breadcrumbs-text-color-active: var(--dc-primary-text-color);
3048
- --dc-breadcrumbs-separator-color: rgb(107, 114, 128, 0.5); /* gray-500 */
2996
+ .dc-toasts-list {
2997
+ --dc-toaster-padding: 16px;
2998
+ --dc-toaster-animation: 200ms ease;
3049
2999
 
3050
3000
  color-scheme: light;
3051
- }
3052
-
3053
- .dc-breadcrumbs__items {
3054
- color: var(--dc-breadcrumbs-text-color);
3055
- display: flex;
3056
- flex-wrap: wrap;
3057
- align-items: center;
3001
+ position: fixed;
3002
+ z-index: var(--dc-toaster-z-index);
3003
+ right: var(--dc-toaster-padding);
3004
+ left: var(--dc-toaster-padding);
3005
+ box-sizing: border-box;
3058
3006
  margin: 0;
3059
3007
  padding: 0;
3060
3008
  list-style: none;
3009
+ pointer-events: none;
3061
3010
  }
3062
3011
 
3063
- .dc-breadcrumbs-item {
3064
- font: var(--dc-text-sm);
3065
- color: inherit;
3066
- display: inline-flex;
3067
- align-items: center;
3068
- padding: 4px 0;
3012
+ .dc-toasts-list_top-left,
3013
+ .dc-toasts-list_top-center,
3014
+ .dc-toasts-list_top-right {
3015
+ top: var(--dc-toaster-padding);
3069
3016
  }
3070
3017
 
3071
- .dc-breadcrumbs-item__link {
3072
- color: inherit;
3073
- display: flex;
3074
- flex-grow: 1;
3075
- align-items: center;
3076
- text-decoration: none;
3018
+ .dc-toasts-list_bottom-left,
3019
+ .dc-toasts-list_bottom-center,
3020
+ .dc-toasts-list_bottom-right {
3021
+ bottom: var(--dc-toaster-padding);
3077
3022
  }
3078
3023
 
3079
- .dc-breadcrumbs-item__link:hover {
3080
- color: var(--dc-breadcrumbs-text-color-hover);
3081
- cursor: pointer;
3082
- text-decoration: underline;
3024
+ .dc-toasts-list > * {
3025
+ position: absolute;
3026
+ right: 0;
3027
+ left: 0;
3028
+ transition: transform var(--dc-toaster-animation);
3083
3029
  }
3084
3030
 
3085
- .dc-breadcrumbs-item__link.active,
3086
- .dc-breadcrumbs-item__link[aria-current="page"],
3087
- .dc-breadcrumbs-item__link[aria-current="step"],
3088
- .dc-breadcrumbs-item__link[aria-current="true"] {
3089
- color: var(--dc-breadcrumbs-text-color-active);
3031
+ .dc-toasts-list_top-left > *,
3032
+ .dc-toasts-list_bottom-left > * {
3033
+ text-align: left;
3090
3034
  }
3091
3035
 
3092
- .dc-breadcrumbs-item__icon {
3093
- display: inline-flex;
3094
- margin-right: 8px;
3036
+ .dc-toasts-list_top-center > *,
3037
+ .dc-toasts-list_bottom-center > * {
3038
+ text-align: center;
3095
3039
  }
3096
3040
 
3097
- .dc-breadcrumbs-item__separator {
3098
- color: var(--dc-breadcrumbs-separator-color);
3099
- display: inline-flex;
3100
- -webkit-user-select: none;
3101
- -moz-user-select: none;
3102
- user-select: none;
3103
- margin: 0 12px;
3041
+ .dc-toasts-list_top-right > *,
3042
+ .dc-toasts-list_bottom-right > * {
3043
+ text-align: right;
3104
3044
  }
3105
3045
 
3106
- .dc-breadcrumbs-item:last-child .dc-breadcrumbs-item__separator {
3107
- display: none;
3046
+ .dc-toasts-list__toast {
3047
+ pointer-events: all;
3048
+ animation: var(--dc-toaster-animation) forwards;
3108
3049
  }
3109
3050
 
3110
- .dc-filter-buttons {
3111
- --dc-filter-button-text-color: var(--dc-button-default-tinted-text-color);
3112
- --dc-filter-button-bg: var(--dc-button-default-tinted-bg);
3113
- --dc-filter-button-bg-hover: var(--dc-button-default-tinted-bg-hover);
3114
- --dc-filter-button-text-color-active: var(--dc-button-primary-text-color);
3115
- --dc-filter-button-bg-active: var(--dc-button-primary-bg);
3116
- --dc-filter-button-bg-active-hover: var(--dc-button-primary-bg-hover);
3051
+ @keyframes dc-toast-slide-top {
3052
+ 0% {
3053
+ opacity: 0;
3054
+ transform: translateY(-100%);
3055
+ }
3117
3056
 
3118
- color-scheme: light;
3119
- position: relative;
3120
- display: flex;
3121
- overflow: auto;
3122
- align-items: center;
3123
- max-width: 100%;
3124
- padding-bottom: 4px;
3057
+ 100% {
3058
+ opacity: 1;
3059
+ transform: translateY(0);
3060
+ }
3125
3061
  }
3126
3062
 
3127
- .dc-filter-buttons > * + * {
3128
- margin-left: 8px;
3063
+ .dc-toasts-list_top-left .dc-toasts-list__toast,
3064
+ .dc-toasts-list_top-center .dc-toasts-list__toast,
3065
+ .dc-toasts-list_top-right .dc-toasts-list__toast {
3066
+ animation-name: dc-toast-slide-top;
3129
3067
  }
3130
3068
 
3131
- .dc-filter-button {
3069
+ @keyframes dc-toast-slide-bottom {
3070
+ 0% {
3071
+ opacity: 0;
3072
+ transform: translateY(0);
3073
+ }
3074
+
3075
+ 100% {
3076
+ opacity: 1;
3077
+ transform: translateY(-100%);
3078
+ }
3079
+ }
3080
+
3081
+ .dc-toasts-list_bottom-left .dc-toasts-list__toast,
3082
+ .dc-toasts-list_bottom-center .dc-toasts-list__toast,
3083
+ .dc-toasts-list_bottom-right .dc-toasts-list__toast {
3084
+ animation-name: dc-toast-slide-bottom;
3085
+ }
3086
+
3087
+ .dc-empty-state {
3088
+ --dc-empty-state-inner-width: 640px;
3089
+ --dc-empty-state-primary-color: var(--dc-primary-text-color);
3090
+ --dc-empty-state-secondary-color: var(--dc-secondary-text-color);
3091
+
3092
+ color-scheme: light;
3132
3093
  font: var(--dc-text-sm);
3133
- color: var(--dc-filter-button-text-color);
3134
- display: inline-flex;
3135
- cursor: pointer;
3136
- -webkit-user-select: none;
3137
- -moz-user-select: none;
3138
- user-select: none;
3094
+ display: flex;
3095
+ flex-direction: column;
3139
3096
  align-items: center;
3097
+ justify-content: center;
3140
3098
  box-sizing: border-box;
3141
- height: 28px;
3142
- padding: 0 8px;
3143
- transition-duration: 0.2s;
3144
- transition-property: color, background-color;
3145
- white-space: nowrap;
3146
- border: 1px solid transparent;
3147
- border-radius: 7px;
3148
- background: var(--dc-filter-button-bg);
3099
+ padding: 16px;
3100
+ text-align: center;
3149
3101
  }
3150
3102
 
3151
- .dc-filter-button:hover {
3152
- background: var(--dc-filter-button-bg-hover);
3103
+ .dc-empty-state__image {
3104
+ color: var(--dc-empty-state-secondary-color);
3105
+ }
3106
+
3107
+ .dc-empty-state__heading,
3108
+ .dc-empty-state__description {
3109
+ max-width: var(--dc-empty-state-inner-width);
3110
+ margin: 0;
3153
3111
  }
3154
3112
 
3155
- .dc-filter-button.active,
3156
- .dc-filter-button[aria-pressed="true"] {
3157
- color: var(--dc-filter-button-text-color-active);
3158
- background: var(--dc-filter-button-bg-active);
3113
+ .dc-empty-state__heading {
3114
+ font: 600 var(--dc-text-lg);
3159
3115
  }
3160
3116
 
3161
- .dc-filter-button.active:hover,
3162
- .dc-filter-button[aria-pressed="true"]:hover {
3163
- background: var(--dc-filter-button-bg-active-hover);
3117
+ .dc-empty-state__description {
3118
+ color: var(--dc-empty-state-secondary-color);
3164
3119
  }
3165
3120
 
3166
- /* Overlays */
3121
+ * + .dc-empty-state__heading,
3122
+ * + .dc-empty-state__description {
3123
+ margin-top: 8px;
3124
+ }
3167
3125
 
3168
- .dc-tooltip {
3169
- --dc-tooltip-text-color: var(--dc-gray-50);
3170
- --dc-tooltip-bg: var(--dc-gray-700);
3171
- --dc-tooltip-transition-duration: 100ms;
3126
+ .dc-empty-state__heading + .dc-empty-state__description {
3127
+ margin-top: 4px;
3128
+ }
3172
3129
 
3173
- color-scheme: light;
3174
- font: var(--dc-text-xs);
3175
- color: var(--dc-tooltip-text-color);
3176
- z-index: var(--dc-overlay-z-index);
3177
- top: 0;
3178
- left: 0;
3179
- box-sizing: border-box;
3180
- padding: 4px 8px;
3181
- border-radius: 6px;
3182
- background: var(--dc-tooltip-bg);
3183
- box-shadow: var(--dc-shadow-md);
3130
+ * + .dc-empty-state__primary-action,
3131
+ * + .dc-empty-state__secondary-action {
3132
+ margin-top: 24px;
3184
3133
  }
3185
3134
 
3186
- .dc-tooltip_hidden {
3187
- opacity: 0;
3188
- transition: opacity var(--dc-tooltip-transition-duration) ease;
3135
+ .dc-empty-state__primary-action + .dc-empty-state__secondary-action {
3136
+ margin-top: 12px;
3189
3137
  }
3190
3138
 
3191
- .dc-tooltip_visible {
3192
- opacity: 1;
3139
+ .dc-empty-state__content {
3193
3140
  }
3194
3141
 
3195
- .dc-popover {
3196
- --dc-popover-text-color: var(--dc-primary-text-color);
3197
- --dc-popover-transition-duration: 100ms;
3198
- --dc-popover-bg: white;
3199
- --dc-popover-shadow:
3200
- 0 2px 0 -1px rgba(0, 0, 0, 0.075),
3201
- 0 0 0 1px var(--dc-gray-200),
3202
- var(--dc-shadow-lg);
3142
+ /* Navigation */
3143
+
3144
+ .dc-tabs {
3145
+ --dc-tablist-border-color: var(--dc-border-color-transparent-2);
3146
+ --dc-tab-text-color: var(--dc-primary-text-color);
3147
+ --dc-tab-accent-color: var(--dc-primary-color);
3148
+ --dc-tab-bg: none;
3149
+ --dc-tab-bg-hover: var(--dc-bg-transparent-1);
3150
+ --dc-tab-focus-ring-color: var(--dc-focus-ring-color);
3203
3151
 
3204
3152
  color-scheme: light;
3205
- z-index: var(--dc-overlay-z-index);
3206
- top: 0;
3207
- left: 0;
3208
- box-sizing: border-box;
3209
- padding: 1px;
3210
3153
  }
3211
3154
 
3212
- .dc-popover-modal {
3155
+ .dc-tab {
3156
+ -webkit-appearance: none;
3157
+ -moz-appearance: none;
3158
+ appearance: none;
3213
3159
  font: var(--dc-text-sm);
3214
- color: var(--dc-popover-text-color);
3215
- box-sizing: border-box;
3216
- max-width: 448px;
3217
- padding: 12px 16px;
3218
- border-radius: 8px;
3219
- background: var(--dc-popover-bg);
3220
- box-shadow: var(--dc-popover-shadow);
3160
+ color: var(--dc-tab-text-color);
3161
+ position: relative;
3162
+ cursor: pointer;
3163
+ margin: 0;
3164
+ padding: 0;
3165
+ border: none;
3166
+ background: none;
3221
3167
  }
3222
3168
 
3223
- .dc-popover_closed .dc-popover-modal {
3224
- opacity: 0;
3225
- transform: scale(0.95);
3226
- transition: var(--dc-popover-transition-duration) ease;
3227
- transition-property: opacity, transform;
3169
+ .dc-tab:focus {
3170
+ outline: none;
3228
3171
  }
3229
3172
 
3230
- .dc-popover_opened .dc-popover-modal {
3231
- opacity: 1;
3232
- transform: scale(1);
3173
+ .dc-tab[aria-selected="true"]::after {
3174
+ content: "";
3175
+ position: absolute;
3176
+ bottom: 0;
3177
+ left: 0;
3178
+ width: 100%;
3179
+ height: 2px;
3180
+ border-radius: 1px;
3181
+ background: var(--dc-blue-500);
3233
3182
  }
3234
3183
 
3235
- .dc-popover[data-position="top-start"] .dc-popover-modal {
3236
- transform-origin: bottom left;
3184
+ .dc-tab__layout {
3185
+ display: flex;
3186
+ align-items: center;
3187
+ justify-content: center;
3188
+ height: 32px;
3189
+ margin-bottom: 8px;
3190
+ padding-right: 8px;
3191
+ padding-left: 8px;
3192
+ border-radius: 8px;
3193
+ background: var(--dc-tab-bg);
3237
3194
  }
3238
3195
 
3239
- .dc-popover[data-position="top-center"] .dc-popover-modal {
3240
- transform-origin: bottom center;
3196
+ .dc-tab:hover .dc-tab__layout {
3197
+ background: var(--dc-tab-bg-hover);
3241
3198
  }
3242
3199
 
3243
- .dc-popover[data-position="top-right"] .dc-popover-modal {
3244
- transform-origin: bottom left;
3200
+ .dc-tab:focus .dc-tab__layout {
3201
+ box-shadow: inset 0 0 0 3px var(--dc-tab-focus-ring-color);
3245
3202
  }
3246
3203
 
3247
- .dc-popover[data-position="right-start"] .dc-popover-modal {
3248
- transform-origin: left top;
3204
+ .dc-tab:focus:not(:focus-visible) .dc-tab__layout {
3205
+ box-shadow: none;
3249
3206
  }
3250
3207
 
3251
- .dc-popover[data-position="right-center"] .dc-popover-modal {
3252
- transform-origin: left center;
3208
+ .dc-tab__icon {
3209
+ display: inline-flex;
3210
+ margin-right: 8px;
3253
3211
  }
3254
3212
 
3255
- .dc-popover[data-position="right-right"] .dc-popover-modal {
3256
- transform-origin: left bottom;
3213
+ .dc-tab__label {
3214
+ white-space: nowrap;
3257
3215
  }
3258
3216
 
3259
- .dc-popover[data-position="bottom-start"] .dc-popover-modal {
3260
- transform-origin: top left;
3217
+ .dc-tab__counter {
3218
+ margin-left: 12px;
3261
3219
  }
3262
3220
 
3263
- .dc-popover[data-position="bottom-center"] .dc-popover-modal {
3264
- transform-origin: top center;
3221
+ .dc-tab-list {
3222
+ display: flex;
3223
+ overflow-x: auto;
3224
+ align-items: center;
3225
+ box-sizing: border-box;
3226
+ max-width: 100%;
3227
+ box-shadow: inset 0 -1px 0 var(--dc-tablist-border-color);
3265
3228
  }
3266
3229
 
3267
- .dc-popover[data-position="bottom-right"] .dc-popover-modal {
3268
- transform-origin: top left;
3230
+ .dc-tab-list > * + * {
3231
+ margin-left: 16px;
3269
3232
  }
3270
3233
 
3271
- .dc-popover[data-position="left-start"] .dc-popover-modal {
3272
- transform-origin: right top;
3234
+ .dc-menu {
3235
+ --dc-menu-item-color: var(--dc-button-default-plain-text-color);
3236
+ --dc-menu-item-bg: var(--dc-button-default-bg-hover);
3237
+ --dc-menu-item-color-destructive: var(--dc-button-danger-plain-text-color);
3238
+ --dc-menu-item-bg-destructive: var(--dc-button-danger-plain-bg-hover);
3239
+ --dc-menu-separator-color: var(--dc-bg-transparent-2);
3240
+
3241
+ color-scheme: light;
3242
+ box-sizing: border-box;
3243
+ width: 100%;
3244
+ margin: 0;
3245
+ padding: 0;
3246
+ list-style: none;
3273
3247
  }
3274
3248
 
3275
- .dc-popover[data-position="left-center"] .dc-popover-modal {
3276
- transform-origin: right center;
3249
+ .dc-menu__container {
3250
+ min-width: 160px;
3251
+ padding: 4px;
3277
3252
  }
3278
3253
 
3279
- .dc-popover[data-position="left-right"] .dc-popover-modal {
3280
- transform-origin: right bottom;
3254
+ .dc-menu__separator {
3255
+ box-sizing: border-box;
3256
+ height: 1px;
3257
+ margin: 4px 8px;
3258
+ background: var(--dc-menu-separator-color);
3281
3259
  }
3282
3260
 
3283
- .dc-dialog {
3284
- --dc-dialog-max-width: 480px;
3285
- --dc-dialog-safe-area: 16px;
3286
- --dc-dialog-viewport-gap: 16px;
3287
- --dc-dialog-transition-duration: 200ms;
3288
- --dc-dialog-text-color: var(--dc-primary-text-color);
3289
- --dc-dialog-border-color: transparent;
3290
- --dc-dialog-bg: var(--dc-primary-bg);
3291
- --dc-dialog-inset-shadow-color: var(--dc-border-color-transparent-2);
3292
- --dc-dialog-backdrop-color: rgba(17, 24, 39, 0.4); /* gray-900 */
3261
+ .dc-menu-btn {
3262
+ -webkit-appearance: none;
3263
+ -moz-appearance: none;
3264
+ appearance: none;
3265
+ font: var(--dc-text-sm);
3266
+ color: var(--dc-menu-item-color);
3267
+ display: flex;
3268
+ -webkit-user-select: none;
3269
+ -moz-user-select: none;
3270
+ user-select: none;
3271
+ align-items: center;
3272
+ width: 100%;
3273
+ height: 32px;
3274
+ padding: 0 12px;
3275
+ white-space: nowrap;
3276
+ border: none;
3277
+ border-radius: 6px;
3278
+ background: transparent;
3279
+ }
3293
3280
 
3294
- color-scheme: light;
3295
- position: relative;
3296
- z-index: var(--dc-overlay-z-index);
3281
+ .dc-menu-btn:hover {
3282
+ cursor: pointer;
3297
3283
  }
3298
3284
 
3299
- .dc-dialog-backdrop {
3300
- position: fixed;
3301
- top: 0;
3302
- left: 0;
3303
- box-sizing: border-box;
3304
- width: 100%;
3305
- height: 100%;
3306
- padding: var(--dc-dialog-viewport-gap);
3307
- background: var(--dc-dialog-backdrop-color);
3285
+ .dc-menu-btn:focus {
3286
+ outline: none;
3287
+ background: var(--dc-menu-item-bg);
3308
3288
  }
3309
3289
 
3310
- .dc-dialog_closed .dc-dialog-backdrop {
3311
- opacity: 0;
3312
- transition: opacity var(--dc-dialog-transition-duration) linear;
3290
+ .dc-menu-btn__icon {
3291
+ display: inline-flex;
3292
+ margin-right: 8px;
3313
3293
  }
3314
3294
 
3315
- .dc-dialog_opened .dc-dialog-backdrop {
3316
- opacity: 1;
3295
+ .dc-menu-btn_destructive {
3296
+ color: var(--dc-menu-item-color-destructive);
3317
3297
  }
3318
3298
 
3319
- .dc-dialog-modal {
3320
- color: var(--dc-dialog-text-color);
3321
- position: fixed;
3322
- top: 50%;
3323
- left: 50%;
3324
- display: flex;
3325
- flex-direction: column;
3326
- box-sizing: border-box;
3327
- width: 100%;
3328
- max-width: calc(var(--dc-dialog-max-width) + 2 * var(--dc-dialog-safe-area));
3329
- max-height: calc(100% - 2 * var(--dc-dialog-viewport-gap));
3330
- transform: translate(-50%, -50%);
3331
- border-radius: 12px;
3332
- background: var(--dc-dialog-bg);
3333
- box-shadow: var(--dc-shadow-xl);
3299
+ .dc-menu-btn_destructive:focus {
3300
+ background: var(--dc-menu-item-bg-destructive);
3301
+ }
3302
+
3303
+ .dc-nav-list {
3304
+ --dc-nav-list-title-color: var(--dc-secondary-text-color);
3305
+ --dc-nav-link-text-color: var(--dc-primary-text-color);
3306
+ --dc-nav-link-bg: transparent;
3307
+ --dc-nav-link-bg-hover: var(--dc-bg-transparent-2);
3308
+ --dc-nav-link-bg-active: var(--dc-bg-transparent-2);
3309
+ --dc-nav-link-focus-ring-color: var(--dc-focus-ring-color);
3310
+
3311
+ color-scheme: light;
3334
3312
  }
3335
3313
 
3336
- .dc-dialog-modal_sm {
3337
- --dc-dialog-max-width: 320px;
3314
+ .dc-nav-list__items {
3315
+ margin: 0;
3316
+ padding: 0;
3317
+ list-style: none;
3338
3318
  }
3339
3319
 
3340
- .dc-dialog-modal_lg {
3341
- --dc-dialog-max-width: 640px;
3320
+ .dc-nav-list__title,
3321
+ .dc-nav-link {
3322
+ box-sizing: border-box;
3323
+ padding: 0 12px;
3342
3324
  }
3343
3325
 
3344
- .dc-dialog_closed .dc-dialog-modal {
3345
- opacity: 0;
3346
- transform: translate(-50%, -50%) scale(0.95);
3347
- transition: var(--dc-dialog-transition-duration) ease;
3348
- transition-property: opacity, transform;
3326
+ .dc-nav-list__title {
3327
+ font: 500 var(--dc-text-xs);
3328
+ color: var(--dc-nav-list-title-color);
3349
3329
  }
3350
3330
 
3351
- .dc-dialog_opened .dc-dialog-modal {
3352
- opacity: 1;
3353
- transform: translate(-50%, -50%) scale(1);
3331
+ * + .dc-nav-list__title {
3332
+ margin-top: 20px;
3354
3333
  }
3355
3334
 
3356
- .dc-dialog-header,
3357
- .dc-dialog-body,
3358
- .dc-dialog-footer {
3359
- padding: calc(var(--dc-dialog-safe-area) / 2) var(--dc-dialog-safe-area);
3335
+ * + .dc-nav-list__item {
3336
+ margin-top: 2px;
3360
3337
  }
3361
3338
 
3362
- .dc-dialog-header {
3339
+ .dc-nav-link {
3363
3340
  font: var(--dc-text-sm);
3341
+ color: var(--dc-nav-link-text-color);
3342
+ display: flex;
3343
+ cursor: pointer;
3344
+ align-items: center;
3345
+ height: 36px;
3346
+ white-space: nowrap;
3347
+ text-decoration: none;
3348
+ border-radius: 8px;
3364
3349
  }
3365
3350
 
3366
- .dc-dialog-header__title-bar {
3367
- position: relative;
3368
- padding-right: 24px;
3351
+ .dc-nav-link:hover {
3352
+ background: var(--dc-nav-link-bg-hover);
3369
3353
  }
3370
3354
 
3371
- .dc-dialog-header__heading {
3372
- font: 700 var(--dc-text-md);
3373
- margin: 0;
3355
+ .dc-nav-link:focus {
3356
+ outline: none;
3357
+ box-shadow: 0 0 0 2px var(--dc-nav-link-focus-ring-color);
3374
3358
  }
3375
3359
 
3376
- .dc-dialog-header__close-btn {
3377
- position: absolute;
3378
- top: -8px;
3379
- right: -8px;
3380
- width: 32px;
3381
- height: 32px;
3360
+ .dc-nav-link:focus:not(:focus-visible) {
3361
+ box-shadow: none;
3382
3362
  }
3383
3363
 
3384
- .dc-dialog-header__subheading,
3385
- .dc-dialog-header__body {
3364
+ .dc-nav-link.active,
3365
+ .dc-nav-link[aria-current="page"],
3366
+ .dc-nav-link[aria-current="step"],
3367
+ .dc-nav-link[aria-current="true"] {
3368
+ background: var(--dc-nav-link-bg-active);
3386
3369
  }
3387
3370
 
3388
- .dc-dialog-body {
3389
- position: relative;
3390
- overflow: auto;
3391
- -webkit-overflow-scrolling: touch;
3392
- flex-grow: 1;
3393
- padding-top: var(--dc-dialog-safe-area);
3394
- padding-bottom: var(--dc-dialog-safe-area);
3371
+ .dc-nav-link__icon {
3372
+ display: inline-flex;
3373
+ margin-right: 8px;
3395
3374
  }
3396
3375
 
3397
- .dc-dialog-body_scroll-shadow-top {
3398
- box-shadow: inset 0 1px 1px var(--dc-dialog-inset-shadow-color);
3376
+ .dc-nav-link__text {
3377
+ overflow: hidden;
3378
+ flex-grow: 1;
3379
+ grid-area: text;
3380
+ min-width: 0;
3381
+ text-overflow: ellipsis;
3399
3382
  }
3400
3383
 
3401
- .dc-dialog-body_scroll-shadow-bottom {
3402
- box-shadow: inset 0 -1px 1px var(--dc-dialog-inset-shadow-color);
3384
+ .dc-nav-link__badge {
3385
+ margin-left: 8px;
3403
3386
  }
3404
3387
 
3405
- .dc-dialog-body_scroll-shadow-top.dc-dialog-body_scroll-shadow-bottom {
3406
- box-shadow:
3407
- inset 0 1px 0 var(--dc-dialog-inset-shadow-color),
3408
- inset 0 -1px 0 var(--dc-dialog-inset-shadow-color);
3388
+ .dc-breadcrumbs {
3389
+ --dc-breadcrumbs-text-color: var(--dc-secondary-text-color);
3390
+ --dc-breadcrumbs-text-color-hover: var(--dc-primary-text-color);
3391
+ --dc-breadcrumbs-text-color-active: var(--dc-primary-text-color);
3392
+ --dc-breadcrumbs-separator-color: rgb(107, 114, 128, 0.5); /* gray-500 */
3393
+
3394
+ color-scheme: light;
3409
3395
  }
3410
3396
 
3411
- .dc-dialog-footer {
3397
+ .dc-breadcrumbs__items {
3398
+ color: var(--dc-breadcrumbs-text-color);
3412
3399
  display: flex;
3413
3400
  flex-wrap: wrap;
3414
3401
  align-items: center;
3415
- justify-content: flex-end;
3402
+ margin: 0;
3403
+ padding: 0;
3404
+ list-style: none;
3416
3405
  }
3417
3406
 
3418
- .dc-dialog-footer > * + * {
3419
- margin-left: 8px;
3407
+ .dc-breadcrumbs-item {
3408
+ font: var(--dc-text-sm);
3409
+ color: inherit;
3410
+ display: inline-flex;
3411
+ align-items: center;
3412
+ padding: 4px 0;
3420
3413
  }
3421
3414
 
3422
- .dc-dialog-modal > .dc-dialog-header:first-child,
3423
- .dc-dialog-modal > .dc-dialog-body:first-child,
3424
- .dc-dialog-modal > .dc-dialog-footer:first-child {
3425
- padding-top: var(--dc-dialog-safe-area);
3426
- border-top-left-radius: inherit;
3427
- border-top-right-radius: inherit;
3415
+ .dc-breadcrumbs-item__link {
3416
+ color: inherit;
3417
+ display: flex;
3418
+ flex-grow: 1;
3419
+ align-items: center;
3420
+ text-decoration: none;
3428
3421
  }
3429
3422
 
3430
- .dc-dialog-modal > .dc-dialog-header:last-child,
3431
- .dc-dialog-modal > .dc-dialog-body:last-child,
3432
- .dc-dialog-modal > .dc-dialog-footer:last-child {
3433
- padding-bottom: var(--dc-dialog-safe-area);
3434
- border-bottom-right-radius: inherit;
3435
- border-bottom-left-radius: inherit;
3423
+ .dc-breadcrumbs-item__link:hover {
3424
+ color: var(--dc-breadcrumbs-text-color-hover);
3425
+ cursor: pointer;
3426
+ text-decoration: underline;
3436
3427
  }
3437
3428
 
3438
- .dc-date-picker-popover {
3439
- color-scheme: light;
3429
+ .dc-breadcrumbs-item__link.active,
3430
+ .dc-breadcrumbs-item__link[aria-current="page"],
3431
+ .dc-breadcrumbs-item__link[aria-current="step"],
3432
+ .dc-breadcrumbs-item__link[aria-current="true"] {
3433
+ color: var(--dc-breadcrumbs-text-color-active);
3440
3434
  }
3441
3435
 
3442
- .dc-date-range-picker-popover {
3443
- color-scheme: light;
3444
- display: inline-grid;
3445
- grid-template-areas:
3446
- "presets calendar"
3447
- "footer footer";
3448
- grid-template-columns: 1fr 1fr;
3449
- grid-gap: 20px 24px;
3436
+ .dc-breadcrumbs-item__icon {
3437
+ display: inline-flex;
3438
+ margin-right: 8px;
3450
3439
  }
3451
3440
 
3452
- .dc-date-range-picker-popover_compact {
3453
- grid-template-areas:
3454
- "presets"
3455
- "calendar"
3456
- "footer";
3457
- grid-template-columns: 100%;
3458
- max-width: 100%;
3441
+ .dc-breadcrumbs-item__separator {
3442
+ color: var(--dc-breadcrumbs-separator-color);
3443
+ display: inline-flex;
3444
+ -webkit-user-select: none;
3445
+ -moz-user-select: none;
3446
+ user-select: none;
3447
+ margin: 0 12px;
3459
3448
  }
3460
3449
 
3461
- .dc-date-range-picker-popover__presets {
3462
- grid-area: presets;
3463
- margin: 0;
3464
- padding: 0;
3465
- list-style: none;
3450
+ .dc-breadcrumbs-item:last-child .dc-breadcrumbs-item__separator {
3451
+ display: none;
3466
3452
  }
3467
3453
 
3468
- .dc-date-range-picker-popover__presets > * {
3469
- white-space: nowrap;
3470
- }
3454
+ .dc-filter-buttons {
3455
+ --dc-filter-button-text-color: var(--dc-button-default-tinted-text-color);
3456
+ --dc-filter-button-bg: var(--dc-button-default-tinted-bg);
3457
+ --dc-filter-button-bg-hover: var(--dc-button-default-tinted-bg-hover);
3458
+ --dc-filter-button-text-color-active: var(--dc-button-primary-text-color);
3459
+ --dc-filter-button-bg-active: var(--dc-button-primary-bg);
3460
+ --dc-filter-button-bg-active-hover: var(--dc-button-primary-bg-hover);
3471
3461
 
3472
- .dc-date-range-picker-popover__presets > * + * {
3473
- margin-top: 8px;
3462
+ color-scheme: light;
3463
+ position: relative;
3464
+ display: flex;
3465
+ overflow: auto;
3466
+ align-items: center;
3467
+ max-width: 100%;
3468
+ padding-bottom: 4px;
3474
3469
  }
3475
3470
 
3476
- .dc-date-range-picker-popover__calendar {
3477
- grid-area: calendar;
3471
+ .dc-filter-buttons > * + * {
3472
+ margin-left: 8px;
3478
3473
  }
3479
3474
 
3480
- .dc-date-range-picker-popover__footer {
3481
- font: var(--dc-text-xs);
3482
- display: grid;
3483
- grid-area: footer;
3484
- grid-template-areas: "content cancel confirm";
3485
- grid-template-columns: 1fr auto auto;
3486
- grid-gap: 8px;
3475
+ .dc-filter-button {
3476
+ font: var(--dc-text-sm);
3477
+ color: var(--dc-filter-button-text-color);
3478
+ display: inline-flex;
3479
+ cursor: pointer;
3480
+ -webkit-user-select: none;
3481
+ -moz-user-select: none;
3482
+ user-select: none;
3487
3483
  align-items: center;
3484
+ box-sizing: border-box;
3485
+ height: 28px;
3486
+ padding: 0 8px;
3487
+ transition-duration: 0.2s;
3488
+ transition-property: color, background-color;
3489
+ white-space: nowrap;
3490
+ border: 1px solid transparent;
3491
+ border-radius: 7px;
3492
+ background: var(--dc-filter-button-bg);
3488
3493
  }
3489
3494
 
3490
- .dc-date-range-picker-popover__footer-content {
3491
- grid-area: content;
3492
- }
3493
-
3494
- .dc-date-range-picker-popover__footer-cancel {
3495
- grid-area: cancel;
3495
+ .dc-filter-button:hover {
3496
+ background: var(--dc-filter-button-bg-hover);
3496
3497
  }
3497
3498
 
3498
- .dc-date-range-picker-popover__footer-confirm {
3499
- grid-area: confirm;
3499
+ .dc-filter-button.active,
3500
+ .dc-filter-button[aria-pressed="true"] {
3501
+ color: var(--dc-filter-button-text-color-active);
3502
+ background: var(--dc-filter-button-bg-active);
3500
3503
  }
3501
3504
 
3502
- .dc-date-range-picker-popover_compact .dc-date-range-picker-popover__footer {
3503
- grid-template-areas:
3504
- "content content"
3505
- "cancel confirm";
3506
- grid-template-columns: 1fr 1fr;
3507
- text-align: right;
3505
+ .dc-filter-button.active:hover,
3506
+ .dc-filter-button[aria-pressed="true"]:hover {
3507
+ background: var(--dc-filter-button-bg-active-hover);
3508
3508
  }