@unifiedsoftware/styles 2.0.0-beta.23 → 2.0.0-beta.24

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 (11) hide show
  1. package/css/fci.css +60 -1
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +1186 -1123
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +115 -24
  7. package/scss/components/_button.scss +1 -3
  8. package/scss/components/_index.scss +5 -5
  9. package/scss/themes/fci/_tokens.scss +9 -2
  10. package/scss/themes/fci/components/_button.scss +45 -31
  11. package/scss/themes/fci/components/_list.scss +4 -0
package/css/styles.css CHANGED
@@ -194,7 +194,6 @@
194
194
  cursor: pointer;
195
195
  color: var(--us-button-color);
196
196
  background-color: var(--us-button-background);
197
- z-index: 0;
198
197
  display: inline-flex;
199
198
  justify-content: center;
200
199
  align-items: center;
@@ -256,7 +255,7 @@
256
255
  .us-button-group--col .us-button:not(.us-button:last-of-type) {
257
256
  border-bottom: var(--us-button-divider-width) solid var(--us-button-divider-color);
258
257
  }
259
- .us-button__start-icon, .us-button__end-icon, .us-button__content {
258
+ .us-button__start-icon, .us-button__end-icon {
260
259
  position: relative;
261
260
  display: flex;
262
261
  align-items: center;
@@ -739,1449 +738,1449 @@
739
738
  transform: translateY(100%);
740
739
  }
741
740
 
742
- .us-input {
741
+ .us-accordion {
743
742
  position: relative;
744
- width: 100%;
745
- padding: 0;
746
- min-height: var(--us-input-height);
747
- display: flex;
748
- align-items: center;
749
- border: none;
750
- border-radius: var(--us-input-border-radius);
751
- color: var(--us-input-color);
752
- background-color: var(--us-input-background);
743
+ border-radius: var(--us-accordion-border-radius);
753
744
  z-index: 0;
754
- transition: all 0.2s ease-in-out;
755
- cursor: text;
756
- }
757
- .us-input:focus-visible {
758
- outline: none;
759
- }
760
- .us-input--selectable {
761
- cursor: pointer;
762
- }
763
- .us-input--disabled {
764
- opacity: 0.75;
765
- pointer-events: none;
766
- }
767
- .us-input--read-only {
768
- pointer-events: none;
769
- }
770
- .us-input--clearable .us-input__clearable {
771
- transform: scale(0);
772
- transition: all 0.2s ease-in-out;
773
745
  }
774
- .us-input--clearable:hover .us-input__clearable {
775
- transform: scale(0.75);
746
+ .us-accordion:not(.us-accordion--splitted) {
747
+ overflow: hidden;
748
+ background-color: white;
776
749
  }
777
- .us-input-group {
778
- display: flex;
779
- align-items: center;
750
+ .us-accordion--splitted {
751
+ display: grid;
752
+ gap: var(--us-accordion-splitted-gap);
780
753
  }
781
- .us-input-group .us-input {
782
- border-radius: 0px;
754
+ .us-accordion--splitted .us-accordion-item {
755
+ overflow: hidden;
783
756
  }
784
- .us-input-group .us-input:first-of-type {
785
- border-top-left-radius: var(--us-input-border-radius);
786
- border-bottom-left-radius: var(--us-input-border-radius);
757
+ .us-accordion-item {
758
+ position: relative;
759
+ border-bottom: var(--us-accordion-item-border);
787
760
  }
788
- .us-input-group .us-input:last-of-type {
789
- border-top-right-radius: var(--us-input-border-radius);
790
- border-bottom-right-radius: var(--us-input-border-radius);
761
+ .us-accordion-item:last-child {
762
+ border-bottom: none;
791
763
  }
792
- .us-input__icon {
793
- padding: 0;
764
+ .us-accordion-header {
765
+ position: relative;
766
+ height: var(--us-accordion-header-height);
767
+ min-height: var(--us-accordion-header-min-height);
768
+ padding-block: var(--us-accordion-header-padding-y);
769
+ padding-inline: var(--us-accordion-header-padding-x);
770
+ color: var(--us-accordion-header-color);
771
+ z-index: 0;
794
772
  display: flex;
795
- justify-content: center;
796
773
  align-items: center;
797
- border: none;
798
- outline: none;
799
- background-color: transparent;
800
- }
801
- .us-input__icon--opacity {
802
- opacity: 0;
774
+ gap: var(--us-accordion-header-gap);
803
775
  }
804
- .us-input__icon--pointer {
776
+ .us-accordion-header--collapsible {
805
777
  cursor: pointer;
778
+ user-select: none;
779
+ -webkit-tap-highlight-color: transparent;
806
780
  }
807
- .us-input:hover .us-input__icon--opacity-hoverable {
808
- opacity: 0.5;
809
- }
810
- .us-input:hover .us-input__icon--opacity-hoverable:hover {
811
- opacity: 1;
812
- }
813
- .us-input__content {
814
- flex: 1;
815
- height: 100%;
781
+ .us-accordion-header__start-content, .us-accordion-header__end-content {
782
+ flex-shrink: 0;
816
783
  display: flex;
817
784
  align-items: center;
818
- z-index: 1;
819
- overflow: hidden;
785
+ gap: var(--us-accordion-header-content-gap);
820
786
  }
821
- .us-input__content--chips {
822
- padding-block: var(--us-input-padding-y);
823
- padding-inline: var(--us-input-padding-x);
787
+ .us-accordion-header__content {
824
788
  flex-grow: 1;
825
789
  display: flex;
826
- flex-wrap: wrap;
827
- gap: 0.25rem;
790
+ flex-direction: column;
791
+ overflow: hidden;
828
792
  }
829
- .us-input__content--chips input {
830
- flex: 1;
831
- height: 24px;
832
- border: none;
833
- outline: none;
834
- color: inherit;
835
- background: inherit;
836
- min-width: 0;
793
+ .us-accordion-header--centered .us-accordion-header__start-content, .us-accordion-header--centered .us-accordion-header__end-content {
794
+ position: absolute;
837
795
  }
838
- .us-input__field {
839
- flex: 1;
840
- width: 100%;
841
- height: 100%;
842
- padding-block: var(--us-input-padding-y);
843
- padding-inline: var(--us-input-padding-x);
844
- font-size: var(--us-input-font-size);
845
- font-family: var(--us-input-font-family);
846
- line-height: var(--us-input-line-height);
847
- border: none;
848
- outline: none;
849
- color: var(--us-input-color);
850
- background-color: transparent;
851
- display: flex;
852
- align-items: center;
796
+ .us-accordion-header--centered .us-accordion-header__start-content {
797
+ left: var(--us-accordion-header-padding-x);
853
798
  }
854
- .us-input__field:focus {
855
- outline: none !important;
799
+ .us-accordion-header--centered .us-accordion-header__end-content {
800
+ right: var(--us-accordion-header-padding-x);
856
801
  }
857
- .us-input__field::placeholder {
858
- color: var(--us-input-placeholder-color);
802
+ .us-accordion-header--centered .us-accordion-header__content {
803
+ align-items: center;
804
+ text-align: center;
859
805
  }
860
- .us-input__search, .us-input__placeholder {
861
- flex: 1;
862
- width: 100%;
863
- padding-block: var(--us-input-padding-y);
864
- padding-inline: var(--us-input-padding-x);
865
- font-size: var(--us-input-font-size);
866
- font-family: var(--us-input-font-family);
867
- line-height: var(--us-input-line-height);
868
- color: var(--us-input-color);
806
+ .us-accordion-header__title {
807
+ font-size: var(--us-accordion-header-title-font-size);
808
+ font-weight: var(--us-accordion-header-title-font-weight);
809
+ line-height: var(--us-accordion-header-title-line-height);
810
+ opacity: var(--us-accordion-header-title-opacity);
869
811
  overflow: hidden;
812
+ color: var(--us-accordion-header-title-color);
813
+ display: -webkit-box;
814
+ -webkit-box-orient: vertical;
815
+ -webkit-line-clamp: 1;
870
816
  text-overflow: ellipsis;
871
- white-space: nowrap;
872
- display: block;
873
- }
874
- .us-input__placeholder {
875
- color: var(--us-input-placeholder-color);
876
- }
877
- .us-input__start-content, .us-input__end-content {
878
- flex-shrink: 0;
879
- height: 100%;
880
- display: flex;
881
- align-items: center;
882
- font-size: var(--us-input-font-size);
883
- font-family: var(--us-input-font-family);
884
- line-height: var(--us-input-line-height);
885
- gap: var(--us-input-content-gap);
817
+ word-break: break-word;
886
818
  }
887
- .us-input__start-content .us-icon, .us-input__end-content .us-icon {
888
- font-size: var(--us-input-icon-size);
819
+ .us-accordion-header__subtitle {
820
+ font-size: var(--us-accordion-header-subtitle-font-size);
821
+ font-weight: var(--us-accordion-header-subtitle-font-weight);
822
+ line-height: var(--us-accordion-header-subtitle-line-height);
823
+ opacity: var(--us-accordion-header-subtitle-opacity);
824
+ overflow: hidden;
825
+ color: var(--us-accordion-header-subtitle-color);
826
+ display: -webkit-box;
827
+ -webkit-box-orient: vertical;
828
+ -webkit-line-clamp: 1;
829
+ text-overflow: ellipsis;
830
+ word-break: break-word;
889
831
  }
890
- .us-input__start-content {
891
- padding-left: calc(0.75 * var(--us-input-padding-x));
892
- padding-right: calc(0.375 * var(--us-input-padding-x));
832
+ .us-accordion-header:not(.us-accordion-header--bordered) ~ .us-accordion-body:not([data-hidden=true]), .us-accordion-header:not(.us-accordion-header--bordered) ~ :not([hidden]) .us-accordion-body:not([data-hidden=true]) {
833
+ padding-top: 0;
893
834
  }
894
- .us-input__end-content {
895
- padding-inline: calc(0.75 * var(--us-input-padding-x));
835
+ .us-accordion-header--bordered ~ .us-accordion-body:not([data-hidden=true]), .us-accordion-header--bordered ~ :not([hidden]) .us-accordion-body:not([data-hidden=true]) {
836
+ border-top-width: 1px;
896
837
  }
897
- .us-input--start-content .us-input__content .us-input__field, .us-input--start-content .us-input__content .us-input__search, .us-input--start-content .us-input__content .us-input__placeholder {
898
- padding-left: 0;
838
+ .us-accordion-body {
839
+ position: relative;
840
+ border-top: 0px solid #ddd;
841
+ padding-block: var(--us-accordion-body-padding-y);
842
+ padding-inline: var(--us-accordion-body-padding-x);
843
+ font-size: var(--us-accordion-body-font-size);
844
+ line-height: var(--us-accordion-body-line-height);
845
+ color: var(--us-accordion-body-color);
899
846
  }
900
- .us-input--end-content .us-input__content .us-input__field, .us-input--end-content .us-input__content .us-input__search, .us-input--end-content .us-input__content .us-input__placeholder {
901
- padding-right: 0;
847
+ .us-accordion-panel {
848
+ padding: 1rem;
902
849
  }
903
850
 
904
- .us-checkbox {
905
- cursor: pointer;
906
- display: inline-flex;
851
+ .us-list {
852
+ margin: 0;
853
+ padding: var(--us-list-padding-y) var(--us-list-padding-x);
854
+ color: var(--us-list-color);
855
+ background-color: var(--us-list-background);
856
+ }
857
+ .us-list-item {
858
+ position: relative;
859
+ height: var(--us-list-item-height);
860
+ min-height: var(--us-list-item-min-height);
861
+ padding-block: var(--us-list-item-padding-y);
862
+ padding-inline: var(--us-list-item-padding-x);
863
+ font-size: var(--us-list-item-font-size);
864
+ font-weight: var(--us-list-item-font-weight);
865
+ border-radius: var(--us-list-item-border-radius);
866
+ text-decoration: none;
867
+ z-index: 0;
868
+ display: flex;
907
869
  align-items: center;
908
- gap: var(--us-checkbox-gap);
870
+ color: var(--us-list-item-color);
871
+ background-color: var(--us-list-item-background);
909
872
  -webkit-tap-highlight-color: transparent;
873
+ gap: var(--us-list-item-gap);
910
874
  }
911
- .us-checkbox input {
912
- position: absolute;
913
- width: 0;
914
- height: 0;
915
- opacity: 0;
875
+ .us-list-item:hover {
876
+ text-decoration: none;
916
877
  }
917
- .us-checkbox--disabled {
878
+ .us-list-item--hoverable, .us-list-item--selected {
879
+ cursor: pointer;
880
+ user-select: none;
881
+ }
882
+ .us-list-item--disabled {
918
883
  opacity: 0.6;
919
884
  pointer-events: none;
920
885
  }
921
- .us-checkbox--read-only {
922
- pointer-events: none;
886
+ .us-list-item__start-content, .us-list-item__end-content {
887
+ flex-shrink: 0;
888
+ z-index: 1;
889
+ display: flex;
890
+ justify-content: center;
891
+ align-items: center;
892
+ gap: var(--us-list-item-gap);
923
893
  }
924
- .us-checkbox__control {
925
- position: relative;
926
- width: var(--us-checkbox-control-width);
927
- height: var(--us-checkbox-control-height);
928
- border-width: var(--us-checkbox-control-border-width);
929
- border-style: var(--us-checkbox-control-border-style);
930
- border-color: var(--us-checkbox-control-border-color);
931
- border-radius: var(--us-checkbox-control-border-radius);
932
- color: var(--us-checkbox-control-color);
933
- display: flex;
934
- justify-content: center;
935
- align-items: center;
936
- transition: color 0.05s ease-in-out 0.025s, border-color 0.05s ease-in-out 0.025s;
894
+ .us-list-item__content {
895
+ flex-grow: 1;
896
+ z-index: 1;
897
+ display: grid;
937
898
  overflow: hidden;
938
899
  }
939
- .us-checkbox--before .us-checkbox__control {
940
- order: 2;
941
- }
942
- .us-checkbox--befire .us-checkbox__label {
943
- order: 1;
944
- }
945
- .us-checkbox--checked .us-checkbox__control {
946
- border-color: var(--us-_checked-checkbox-control-border-color, var(--us-checkbox-control-border-color));
947
- color: var(--us-_checked-checkbox-control-color, var(--us-checkbox-control-color));
900
+ .us-list-item__title {
901
+ font-size: var(--us-list-item-title-font-size);
902
+ font-weight: var(--us-list-item-title-font-weight);
903
+ line-height: var(--us-list-item-title-line-height);
904
+ opacity: var(--us-list-item-title-opacity);
905
+ overflow: hidden;
906
+ color: var(--us-list-item-title-color);
907
+ display: -webkit-box;
908
+ -webkit-box-orient: vertical;
909
+ -webkit-line-clamp: 1;
948
910
  }
949
- .us-checkbox--focus .us-checkbox__control {
950
- box-shadow: var(--us-_focus-checkbox-control-box-shadow);
911
+ .us-list-item__subtitle {
912
+ font-size: var(--us-list-item-subtitle-font-size);
913
+ font-weight: var(--us-list-item-subtitle-font-weight);
914
+ line-height: var(--us-list-item-subtitle-line-height);
915
+ opacity: var(--us-list-item-subtitle-opacity);
916
+ overflow: hidden;
917
+ color: var(--us-list-item-subtitle-color);
918
+ display: -webkit-box;
919
+ -webkit-box-orient: vertical;
920
+ -webkit-line-clamp: 1;
951
921
  }
952
- .us-checkbox__tap {
953
- position: absolute;
954
- inset: 0px;
955
- opacity: 0;
956
- border-radius: inherit;
957
- background-color: var(--us-checkbox-tap-background);
958
- transform: scale(0);
959
- transition: opacity 0.05s ease-in-out 0.025s, transform 0.05s ease-in-out 0.025s;
922
+ .us-list-subheader--bordered {
923
+ border-bottom: var(--us-list-subheader-border-width) solid var(--us-list-subheader-border-color);
960
924
  }
961
- .us-checkbox--checked .us-checkbox__tap {
962
- opacity: 1;
963
- transform: scale(1.5);
925
+ .us-list-group .us-list {
926
+ --us-list-background: var(--us-list-group-background);
964
927
  }
965
- .us-checkbox .us-icon {
966
- opacity: 1;
967
- transform: scale(0);
968
- transition: opacity 0.05s ease-in-out 0.025s, transform 0.05s ease-in-out 0.025s;
928
+
929
+ .us-data-list {
930
+ flex-grow: 1;
931
+ overflow: hidden;
969
932
  }
970
- .us-checkbox--checked .us-icon {
971
- opacity: 1;
972
- transform: scale(1);
933
+
934
+ .us-menu {
935
+ margin: 0;
936
+ padding: var(--us-menu-padding-y) var(--us-menu-padding-x);
937
+ color: var(--us-menu-color);
938
+ background-color: var(--us-menu-background);
973
939
  }
974
- .us-checkbox-group {
940
+ .us-menu-item {
941
+ position: relative;
942
+ height: var(--us-menu-item-height);
943
+ padding: var(--us-menu-item-padding-y) var(--us-menu-item-padding-x);
944
+ font-size: var(--us-menu-item-font-size);
945
+ font-weight: var(--us-menu-item-font-weight);
946
+ border-radius: var(--us-menu-item-border-radius);
947
+ text-decoration: none;
948
+ cursor: pointer;
949
+ z-index: 0;
975
950
  display: flex;
976
- flex-wrap: wrap;
977
- gap: var(--us-checkbox-group-gap);
978
- }
979
- .us-checkbox-group--row {
980
- flex-direction: row;
981
951
  align-items: center;
952
+ color: var(--us-menu-item-color);
953
+ background-color: var(--us-menu-item-background);
954
+ user-select: none;
955
+ -webkit-tap-highlight-color: transparent;
956
+ gap: var(--us-menu-item-gap);
982
957
  }
983
- .us-checkbox-group--col {
984
- flex-direction: column;
985
- }
986
- .us-checkbox-group--start {
987
- justify-content: flex-start;
988
- }
989
- .us-checkbox-group--center {
990
- justify-content: center;
991
- }
992
- .us-checkbox-group--end {
993
- justify-content: flex-end;
994
- }
995
- .us-checkbox-group--stretch .us-checkbox {
996
- flex-grow: 1;
997
- }
998
- .us-checkbox__label {
999
- font-size: var(--us-checkbox-label-font-size);
1000
- color: var(--us-checkbox-label-color);
958
+ .us-menu-item:hover {
959
+ text-decoration: none;
1001
960
  }
1002
-
1003
- .us-radio {
961
+ .us-menu-item--hoverable {
1004
962
  cursor: pointer;
1005
- display: inline-flex;
1006
- align-items: center;
1007
- gap: var(--us-radio-gap);
1008
- -webkit-tap-highlight-color: transparent;
963
+ user-select: none;
1009
964
  }
1010
- .us-radio--disabled {
965
+ .us-menu-item--disabled {
1011
966
  opacity: 0.6;
1012
967
  pointer-events: none;
1013
968
  }
1014
- .us-radio--read-only {
1015
- pointer-events: none;
969
+ .us-menu-item__start-content {
970
+ flex-shrink: 0;
971
+ z-index: 1;
972
+ display: flex;
973
+ justify-content: center;
974
+ align-items: center;
1016
975
  }
1017
- .us-radio__control {
1018
- position: relative;
1019
- width: var(--us-radio-control-width);
1020
- height: var(--us-radio-control-height);
1021
- border-width: var(--us-radio-control-border-width);
1022
- border-style: var(--us-radio-control-border-style);
1023
- border-color: var(--us-radio-control-border-color);
1024
- border-radius: var(--us-radio-control-border-radius);
1025
- color: var(--us-radio-control-color);
976
+ .us-menu-item__start-content, .us-menu-item__end-content {
977
+ flex-shrink: 0;
978
+ z-index: 1;
1026
979
  display: flex;
1027
980
  justify-content: center;
1028
981
  align-items: center;
1029
- transition: color 0.05s ease-in-out 0.025s, border-color 0.05s ease-in-out 0.025s;
982
+ gap: calc(var(--us-list-item-gap) * 0.5);
983
+ }
984
+ .us-menu-item__content {
985
+ flex-grow: 1;
986
+ z-index: 1;
987
+ display: grid;
1030
988
  overflow: hidden;
1031
989
  }
1032
- .us-radio--before .us-radio__control {
1033
- order: 2;
990
+ .us-menu-item__title {
991
+ overflow: hidden;
992
+ display: -webkit-box;
993
+ -webkit-box-orient: vertical;
994
+ -webkit-line-clamp: 1;
1034
995
  }
1035
- .us-radio--befire .us-radio__label {
1036
- order: 1;
996
+ .us-menu-group {
997
+ position: relative;
998
+ height: var(--us-menu-group-height);
999
+ padding: var(--us-menu-group-padding-y) var(--us-menu-group-padding-x);
1000
+ font-size: var(--us-menu-group-font-size);
1001
+ font-weight: var(--us-menu-group-font-weight);
1002
+ text-decoration: none;
1003
+ border-bottom: var(--us-menu-group-border-width) solid var(--us-menu-group-border-color);
1004
+ border-radius: var(--us-menu-group-border-radius);
1005
+ display: flex;
1006
+ align-items: center;
1007
+ color: var(--us-menu-group-color);
1008
+ background-color: var(--us-menu-group-background);
1009
+ gap: var(--us-menu-group-gap);
1037
1010
  }
1038
- .us-radio--checked .us-radio__control {
1039
- border-color: var(--us-_checked-radio-control-border-color, var(--us-radio-control-border-color));
1040
- color: var(--us-_checked-radio-control-color, var(--us-radio-control-color));
1011
+ .us-menu-group:hover {
1012
+ text-decoration: none;
1041
1013
  }
1042
- .us-radio--focus .us-radio__control {
1043
- box-shadow: var(--us-_focus-radio-control-box-shadow);
1014
+ .us-menu-group__icon {
1015
+ flex-shrink: 0;
1016
+ z-index: 1;
1017
+ display: flex;
1018
+ justify-content: center;
1019
+ align-items: center;
1044
1020
  }
1045
- .us-radio__tap {
1046
- position: absolute;
1047
- inset: 0px;
1048
- opacity: 0;
1049
- border-radius: inherit;
1050
- background-color: var(--us-radio-tap-background);
1051
- transform: scale(0);
1052
- transition: opacity 0.05s ease-in-out 0.025s, transform 0.05s ease-in-out 0.025s;
1021
+ .us-menu-group__content {
1022
+ flex-grow: 1;
1023
+ z-index: 1;
1024
+ display: grid;
1025
+ overflow: hidden;
1053
1026
  }
1054
- .us-radio--checked .us-radio__tap {
1055
- opacity: 1;
1056
- transform: scale(1.5);
1027
+ .us-menu-group__title {
1028
+ overflow: hidden;
1029
+ display: -webkit-box;
1030
+ -webkit-box-orient: vertical;
1031
+ -webkit-line-clamp: 1;
1057
1032
  }
1058
- .us-radio .us-icon {
1059
- opacity: 1;
1060
- transform: scale(0);
1061
- transition: opacity 0.05s ease-in-out 0.025s, transform 0.05s ease-in-out 0.025s;
1033
+ .us-menu-submenu .us-menu {
1034
+ --us-menu-background: var(--us-submenu-background);
1062
1035
  }
1063
- .us-radio--checked .us-icon {
1064
- opacity: 1;
1065
- transform: scale(1);
1036
+
1037
+ .us-divider {
1038
+ width: 100%;
1039
+ height: 1px;
1040
+ background: var(--us-border-color);
1066
1041
  }
1067
- .us-radio-group {
1042
+
1043
+ .us-breadcrumb {
1044
+ padding: 0.5rem 0;
1045
+ font-size: 0.875rem;
1068
1046
  display: flex;
1069
- flex-wrap: wrap;
1070
- gap: var(--us-radio-group-gap);
1071
- }
1072
- .us-radio-group--row {
1073
- flex-direction: row;
1074
1047
  align-items: center;
1048
+ gap: 0;
1075
1049
  }
1076
- .us-radio-group--col {
1077
- flex-direction: column;
1050
+ .us-breadcrumb-item {
1051
+ padding: 0.25rem 0.5rem;
1052
+ white-space: nowrap;
1053
+ display: flex;
1054
+ align-items: center;
1078
1055
  }
1079
- .us-radio-group--start {
1080
- justify-content: flex-start;
1056
+ .us-breadcrumb-item:not(.us-breadcrumb-item--is-menu) {
1057
+ line-height: 32px;
1081
1058
  }
1082
- .us-radio-group--center {
1083
- justify-content: center;
1059
+
1060
+ .us-swipe {
1061
+ position: relative;
1084
1062
  }
1085
- .us-radio-group--end {
1086
- justify-content: flex-end;
1063
+ .us-swipe__content {
1064
+ position: relative;
1065
+ overflow-x: hidden;
1066
+ display: flex;
1067
+ align-items: center;
1068
+ gap: var(--us-swipe-gap);
1087
1069
  }
1088
- .us-radio-group--stretch .us-radio {
1089
- flex-grow: 1;
1070
+ @media (max-width: 767px) and (hover: none) {
1071
+ .us-swipe__content {
1072
+ overflow-x: auto;
1073
+ }
1090
1074
  }
1091
- .us-radio input {
1075
+ .us-swipe__start-content, .us-swipe__end-content {
1092
1076
  position: absolute;
1093
- width: 0;
1094
- height: 0;
1095
- opacity: 0;
1077
+ top: 50%;
1078
+ transform: translateY(-50%);
1079
+ z-index: 1;
1096
1080
  }
1097
- .us-radio__label {
1098
- font-size: var(--us-radio-label-font-size);
1099
- color: var(--us-radio-label-color);
1081
+ .us-swipe__start-content {
1082
+ left: -1.25rem;
1083
+ }
1084
+ .us-swipe__end-content {
1085
+ right: -1.25rem;
1086
+ }
1087
+ .us-swipe--auto-hide .us-swipe__start-content, .us-swipe--auto-hide .us-swipe__end-content {
1088
+ transform: translateY(-50%) scale(0);
1089
+ transition: all 0.2s ease-in-out;
1090
+ }
1091
+ .us-swipe--auto-hide:hover .us-swipe__start-content, .us-swipe--auto-hide:hover .us-swipe__end-content {
1092
+ transform: translateY(-50%) scale(1);
1093
+ }
1094
+ .us-swipe--start .us-swipe-item:last-child {
1095
+ margin-right: auto;
1096
+ }
1097
+ .us-swipe--center .us-swipe-item:first-child {
1098
+ margin-left: auto;
1099
+ }
1100
+ .us-swipe--center .us-swipe-item:last-child {
1101
+ margin-right: auto;
1102
+ }
1103
+ .us-swipe--end .us-swipe-item:first-child {
1104
+ margin-left: auto;
1105
+ }
1106
+ .us-swipe-item {
1107
+ flex-shrink: 0;
1108
+ position: relative;
1100
1109
  }
1101
1110
 
1102
- .us-switch {
1103
- --us-switch-control-padding: calc(var(--us-switch-thumb-width) * 0.25);
1104
- cursor: pointer;
1105
- display: inline-flex;
1111
+ .us-tabs {
1112
+ width: 100%;
1113
+ white-space: nowrap;
1114
+ flex-wrap: wrap;
1115
+ display: flex;
1106
1116
  align-items: center;
1107
- gap: var(--us-switch-gap);
1108
- -webkit-tap-highlight-color: transparent;
1109
1117
  }
1110
- .us-switch input {
1111
- position: absolute;
1112
- opacity: 0;
1113
- width: 0;
1114
- height: 0;
1118
+ .us-tabs--start {
1119
+ justify-content: flex-start;
1115
1120
  }
1116
- .us-switch--disabled {
1117
- opacity: 0.6;
1118
- pointer-events: none;
1121
+ .us-tabs--center {
1122
+ justify-content: center;
1119
1123
  }
1120
- .us-switch--read-only {
1121
- pointer-events: none;
1124
+ .us-tabs--end {
1125
+ justify-content: flex-end;
1122
1126
  }
1123
- .us-switch__control {
1127
+ .us-tabs--stretch .us-tab {
1128
+ flex-grow: 1;
1129
+ }
1130
+ @media (max-width: 767px) and (hover: none) {
1131
+ .us-tabs {
1132
+ overflow: auto;
1133
+ }
1134
+ }
1135
+
1136
+ .us-tab {
1124
1137
  position: relative;
1125
- display: inline-block;
1126
- width: var(--us-switch-control-width);
1127
- height: var(--us-switch-control-height);
1128
- border-radius: var(--us-switch-control-border-radius);
1129
- cursor: pointer;
1130
- background-color: var(--us-switch-control-color);
1138
+ padding-block: var(--us-tab-padding-y);
1139
+ padding-inline: var(--us-tab-padding-x);
1140
+ font-size: var(--us-tab-font-size);
1141
+ font-weight: var(--us-tab-font-weight);
1142
+ text-decoration: none;
1143
+ vertical-align: middle;
1144
+ border-radius: var(--us-tab-border-radius);
1145
+ z-index: 1;
1146
+ color: var(--us-tab-color);
1131
1147
  display: inline-flex;
1148
+ justify-content: center;
1132
1149
  align-items: center;
1133
- transition: all 0.05s ease-in-out;
1134
1150
  user-select: none;
1135
1151
  -webkit-tap-highlight-color: transparent;
1136
1152
  }
1137
- .us-switch--before .us-switch__control {
1138
- order: 2;
1153
+ .us-tab:hover {
1154
+ text-decoration: none;
1139
1155
  }
1140
- .us-switch--befire .us-switch__label {
1141
- order: 1;
1156
+ .us-tab--disabled {
1157
+ opacity: 0.6;
1158
+ pointer-events: none;
1142
1159
  }
1143
- .us-switch--checked .us-switch__control {
1144
- background-color: var(--us-_checked-switch-control-color, var(--us-switch-control-color));
1160
+ .us-tab--closable {
1161
+ padding-inline-end: calc(var(--us-tab-padding-x) / 2);
1145
1162
  }
1146
- .us-switch--focus .us-switch__control {
1147
- box-shadow: var(--us-_focus-switch-control-box-shadow);
1163
+ .us-tab__start-content, .us-tab__end-content {
1164
+ display: flex;
1165
+ align-items: center;
1148
1166
  }
1149
- .us-switch__thumb {
1150
- width: var(--us-switch-thumb-width);
1151
- height: var(--us-switch-thumb-height);
1152
- transform: translateX(var(--us-switch-control-padding));
1153
- border-radius: var(--us-switch-thumb-border-radius);
1154
- background-color: var(--us-switch-thumb-color);
1155
- transition: all 0.05s ease-in-out;
1167
+ .us-tab__content {
1168
+ position: relative;
1169
+ height: var(--us-tab-height);
1170
+ display: inline-flex;
1171
+ flex-direction: row;
1172
+ justify-content: center;
1173
+ align-items: center;
1174
+ gap: 8px;
1156
1175
  }
1157
- .us-switch--checked .us-switch__thumb {
1158
- transform: translateX(calc(var(--us-switch-control-width) - var(--us-switch-thumb-width) - (var(--us-switch-control-padding))));
1176
+ .us-tab__indicator {
1177
+ position: absolute;
1178
+ height: var(--us-tab-indicator-height);
1179
+ border-radius: var(--us-tab-indicator-border-radius);
1180
+ inset: auto 0px 0px;
1181
+ opacity: 0;
1182
+ z-index: -1;
1183
+ color: var(--us-tab-indicator-color);
1184
+ transform-origin: left bottom;
1159
1185
  }
1160
- .us-switch__label {
1161
- font-size: var(--us-switch-label-font-size);
1162
- color: var(--us-switch-label-color);
1186
+ .us-tab--selected .us-tab__indicator {
1187
+ opacity: 1;
1188
+ }
1189
+ .us-tab__closable {
1190
+ position: relative;
1191
+ padding: 0.125rem;
1192
+ color: var(--us-tab-closable-color);
1193
+ border-radius: 9999px;
1194
+ transform: scale(0.75);
1195
+ cursor: pointer;
1196
+ transition: all 0.15s ease-in-out;
1197
+ }
1198
+ .us-tab__closable:hover {
1199
+ transform: scale(1);
1200
+ }
1201
+ .us-tab__closable::after {
1202
+ position: absolute;
1203
+ content: "";
1204
+ inset: 0px;
1205
+ border-radius: inherit;
1206
+ background-color: currentColor;
1207
+ opacity: 0;
1163
1208
  }
1164
1209
 
1165
- .us-accordion {
1210
+ .us-card {
1166
1211
  position: relative;
1167
- border-radius: var(--us-accordion-border-radius);
1212
+ border-radius: var(--us-card-border-radius);
1168
1213
  z-index: 0;
1169
- }
1170
- .us-accordion:not(.us-accordion--splitted) {
1171
1214
  overflow: hidden;
1215
+ -webkit-tap-highlight-color: transparent;
1172
1216
  background-color: white;
1217
+ padding-block: var(--us-card-padding-y);
1218
+ padding-inline: var(--us-card-padding-x);
1219
+ display: flex;
1220
+ flex-direction: column;
1221
+ gap: var(--us-card-gap);
1173
1222
  }
1174
- .us-accordion--splitted {
1175
- display: grid;
1176
- gap: var(--us-accordion-splitted-gap);
1223
+ .us-card:hover {
1224
+ text-decoration: none;
1177
1225
  }
1178
- .us-accordion--splitted .us-accordion-item {
1179
- overflow: hidden;
1226
+ .us-card--bordered {
1227
+ border: var(--us-card-border-width) var(--us-card-border-style) var(--us-card-border-color);
1180
1228
  }
1181
- .us-accordion-item {
1182
- position: relative;
1183
- border-bottom: var(--us-accordion-item-border);
1229
+ .us-card--shadow {
1230
+ box-shadow: var(--us-card-box-shadow);
1184
1231
  }
1185
- .us-accordion-item:last-child {
1186
- border-bottom: none;
1232
+ .us-card--hoverable, .us-card--selected {
1233
+ cursor: pointer;
1234
+ user-select: none;
1187
1235
  }
1188
- .us-accordion-header {
1236
+ .us-card--disabled {
1237
+ opacity: 0.6;
1238
+ cursor: not-allowed;
1239
+ user-select: none;
1240
+ }
1241
+ .us-card-header {
1189
1242
  position: relative;
1190
- height: var(--us-accordion-header-height);
1191
- min-height: var(--us-accordion-header-min-height);
1192
- padding-block: var(--us-accordion-header-padding-y);
1193
- padding-inline: var(--us-accordion-header-padding-x);
1194
- color: var(--us-accordion-header-color);
1195
- z-index: 0;
1243
+ flex-shrink: 0;
1244
+ height: var(--us-card-header-height);
1245
+ min-height: var(--us-card-header-min-height);
1246
+ padding-block: var(--us-card-header-padding-y);
1247
+ padding-inline: var(--us-card-header-padding-x);
1248
+ color: var(--us-card-header-color);
1196
1249
  display: flex;
1197
1250
  align-items: center;
1198
- gap: var(--us-accordion-header-gap);
1199
- }
1200
- .us-accordion-header--collapsible {
1201
- cursor: pointer;
1202
- user-select: none;
1203
- -webkit-tap-highlight-color: transparent;
1251
+ gap: var(--us-card-header-gap);
1204
1252
  }
1205
- .us-accordion-header__start-content, .us-accordion-header__end-content {
1253
+ .us-card-header__start-content, .us-card-header__end-content {
1206
1254
  flex-shrink: 0;
1207
1255
  display: flex;
1208
1256
  align-items: center;
1209
- gap: var(--us-accordion-header-content-gap);
1257
+ gap: var(--us-card-header-content-gap);
1210
1258
  }
1211
- .us-accordion-header__content {
1259
+ .us-card-header__content {
1212
1260
  flex-grow: 1;
1261
+ overflow: hidden;
1213
1262
  display: flex;
1214
1263
  flex-direction: column;
1215
- overflow: hidden;
1264
+ justify-content: center;
1216
1265
  }
1217
- .us-accordion-header--centered .us-accordion-header__start-content, .us-accordion-header--centered .us-accordion-header__end-content {
1266
+ .us-card-header--centered .us-card-header__start-content, .us-card-header--centered .us-card-header__end-content {
1218
1267
  position: absolute;
1219
1268
  }
1220
- .us-accordion-header--centered .us-accordion-header__start-content {
1221
- left: var(--us-accordion-header-padding-x);
1269
+ .us-card-header--centered .us-card-header__start-content {
1270
+ left: var(--us-card-header-padding-x);
1222
1271
  }
1223
- .us-accordion-header--centered .us-accordion-header__end-content {
1224
- right: var(--us-accordion-header-padding-x);
1272
+ .us-card-header--centered .us-card-header__end-content {
1273
+ right: var(--us-card-header-padding-x);
1225
1274
  }
1226
- .us-accordion-header--centered .us-accordion-header__content {
1275
+ .us-card-header--centered .us-card-header__content {
1227
1276
  align-items: center;
1228
1277
  text-align: center;
1229
1278
  }
1230
- .us-accordion-header__title {
1231
- font-size: var(--us-accordion-header-title-font-size);
1232
- font-weight: var(--us-accordion-header-title-font-weight);
1233
- line-height: var(--us-accordion-header-title-line-height);
1234
- opacity: var(--us-accordion-header-title-opacity);
1279
+ .us-card-header .us-card-title {
1280
+ font-size: var(--us-card-header-title-font-size);
1281
+ font-weight: var(--us-card-header-title-font-weight);
1282
+ line-height: var(--us-card-header-title-line-height);
1235
1283
  overflow: hidden;
1236
- color: var(--us-accordion-header-title-color);
1284
+ color: var(--us-card-header-title-color);
1237
1285
  display: -webkit-box;
1238
1286
  -webkit-box-orient: vertical;
1239
1287
  -webkit-line-clamp: 1;
1240
- text-overflow: ellipsis;
1241
- word-break: break-word;
1242
1288
  }
1243
- .us-accordion-header__subtitle {
1244
- font-size: var(--us-accordion-header-subtitle-font-size);
1245
- font-weight: var(--us-accordion-header-subtitle-font-weight);
1246
- line-height: var(--us-accordion-header-subtitle-line-height);
1247
- opacity: var(--us-accordion-header-subtitle-opacity);
1289
+ .us-card-header .us-card-subtitle {
1290
+ font-size: var(--us-card-header-subtitle-font-size);
1291
+ font-weight: var(--us-card-header-subtitle-font-weight);
1292
+ line-height: var(--us-card-header-subtitle-line-height);
1248
1293
  overflow: hidden;
1249
- color: var(--us-accordion-header-subtitle-color);
1294
+ color: var(--us-card-header-subtitle-color);
1250
1295
  display: -webkit-box;
1251
1296
  -webkit-box-orient: vertical;
1252
1297
  -webkit-line-clamp: 1;
1253
- text-overflow: ellipsis;
1254
- word-break: break-word;
1255
1298
  }
1256
- .us-accordion-header:not(.us-accordion-header--bordered) ~ .us-accordion-body:not([data-hidden=true]), .us-accordion-header:not(.us-accordion-header--bordered) ~ :not([hidden]) .us-accordion-body:not([data-hidden=true]) {
1257
- padding-top: 0;
1299
+ .us-card .us-card-title:not(.us-card-header .us-card-title) {
1300
+ flex-shrink: 0;
1301
+ padding-block: var(--us-card-title-padding-y);
1302
+ padding-inline: var(--us-card-title-padding-x);
1303
+ font-size: var(--us-card-title-font-size);
1304
+ font-weight: var(--us-card-title-font-weight);
1305
+ line-height: var(--us-card-title-line-height);
1306
+ color: var(--us-card-title-color);
1258
1307
  }
1259
- .us-accordion-header--bordered ~ .us-accordion-body:not([data-hidden=true]), .us-accordion-header--bordered ~ :not([hidden]) .us-accordion-body:not([data-hidden=true]) {
1260
- border-top-width: 1px;
1308
+ .us-card .us-card-title--centered:not(.us-card-header .us-card-title) {
1309
+ text-align: center;
1261
1310
  }
1262
- .us-accordion-body {
1263
- position: relative;
1264
- border-top: 0px solid #ddd;
1265
- padding-block: var(--us-accordion-body-padding-y);
1266
- padding-inline: var(--us-accordion-body-padding-x);
1267
- font-size: var(--us-accordion-body-font-size);
1268
- line-height: var(--us-accordion-body-line-height);
1269
- color: var(--us-accordion-body-color);
1311
+ .us-card .us-card-subtitle:not(.us-card-header .us-card-subtitle) {
1312
+ flex-shrink: 0;
1313
+ font-size: var(--us-card-header-subtitle-font-size);
1314
+ font-weight: var(--us-card-header-subtitle-font-weight);
1315
+ line-height: var(--us-card-header-subtitle-line-height);
1316
+ overflow: hidden;
1317
+ color: var(--us-card-header-subtitle-color);
1270
1318
  }
1271
- .us-accordion-panel {
1272
- padding: 1rem;
1319
+ .us-card-body {
1320
+ position: relative;
1321
+ padding-block: var(--us-card-body-padding-y);
1322
+ padding-inline: var(--us-card-body-padding-x);
1323
+ font-size: var(--us-card-body-font-size);
1324
+ line-height: var(--us-card-body-line-height);
1325
+ color: var(--us-card-body-color);
1273
1326
  }
1274
-
1275
- .us-list {
1276
- margin: 0;
1277
- padding: var(--us-list-padding-y) var(--us-list-padding-x);
1278
- color: var(--us-list-color);
1279
- background-color: var(--us-list-background);
1327
+ .us-card-footer {
1328
+ flex-shrink: 0;
1329
+ position: relative;
1330
+ min-height: var(--us-card-footer-min-height);
1331
+ padding-block: var(--us-card-footer-padding-y);
1332
+ padding-inline: var(--us-card-footer-padding-x);
1333
+ border-top-width: 0px;
1334
+ border-top-style: solid;
1335
+ border-top-color: var(--us-card-footer-border-color);
1336
+ background-color: var(--us-card-footer-background);
1337
+ display: flex;
1338
+ justify-content: flex-end;
1339
+ align-items: center;
1340
+ gap: 0.5rem;
1280
1341
  }
1281
- .us-list-item {
1342
+ .us-card-media {
1282
1343
  position: relative;
1283
- height: var(--us-list-item-height);
1284
- min-height: var(--us-list-item-min-height);
1285
- padding-block: var(--us-list-item-padding-y);
1286
- padding-inline: var(--us-list-item-padding-x);
1287
- font-size: var(--us-list-item-font-size);
1288
- font-weight: var(--us-list-item-font-weight);
1289
- border-radius: var(--us-list-item-border-radius);
1290
- text-decoration: none;
1291
- z-index: 0;
1344
+ margin: 8px;
1345
+ border-radius: 8px;
1346
+ aspect-ratio: 1/1;
1347
+ overflow: hidden;
1292
1348
  display: flex;
1349
+ justify-content: center;
1293
1350
  align-items: center;
1294
- color: var(--us-list-item-color);
1295
- background-color: var(--us-list-item-background);
1296
- -webkit-tap-highlight-color: transparent;
1297
- gap: var(--us-list-item-gap);
1351
+ background-color: rgba(0, 0, 0, 0.08);
1298
1352
  }
1299
- .us-list-item:hover {
1300
- text-decoration: none;
1353
+ .us-card-media__top-left-content {
1354
+ padding: 4px;
1355
+ position: absolute;
1356
+ top: 0;
1357
+ left: 0;
1301
1358
  }
1302
- .us-list-item--hoverable, .us-list-item--selected {
1303
- cursor: pointer;
1304
- user-select: none;
1359
+ .us-card-media__top-right-content {
1360
+ padding: 4px;
1361
+ position: absolute;
1362
+ top: 0;
1363
+ right: 0;
1305
1364
  }
1306
- .us-list-item--disabled {
1307
- opacity: 0.6;
1308
- pointer-events: none;
1365
+ .us-card-media img {
1366
+ width: 100%;
1367
+ height: 100%;
1368
+ object-fit: cover;
1309
1369
  }
1310
- .us-list-item__start-content, .us-list-item__end-content {
1311
- flex-shrink: 0;
1312
- z-index: 1;
1313
- display: flex;
1314
- justify-content: center;
1315
- align-items: center;
1316
- gap: var(--us-list-item-gap);
1370
+ .us-card--divider .us-card-body {
1371
+ margin-top: var(--us-card-padding-y);
1317
1372
  }
1318
- .us-list-item__content {
1319
- flex-grow: 1;
1320
- z-index: 1;
1321
- display: grid;
1322
- overflow: hidden;
1373
+ .us-card--divider .us-card-body::after {
1374
+ content: "";
1375
+ position: absolute;
1376
+ left: 0;
1377
+ right: 0;
1378
+ bottom: 0;
1379
+ border-bottom: 1px solid var(--us-card-border-color);
1323
1380
  }
1324
- .us-list-item__title {
1325
- font-size: var(--us-list-item-title-font-size);
1326
- font-weight: var(--us-list-item-title-font-weight);
1327
- line-height: var(--us-list-item-title-line-height);
1328
- opacity: var(--us-list-item-title-opacity);
1329
- overflow: hidden;
1330
- color: var(--us-list-item-title-color);
1331
- display: -webkit-box;
1332
- -webkit-box-orient: vertical;
1333
- -webkit-line-clamp: 1;
1381
+ .us-card--divider .us-card-header ~ .us-card-body {
1382
+ margin-bottom: var(--us-card-padding-y);
1334
1383
  }
1335
- .us-list-item__subtitle {
1336
- font-size: var(--us-list-item-subtitle-font-size);
1337
- font-weight: var(--us-list-item-subtitle-font-weight);
1338
- line-height: var(--us-list-item-subtitle-line-height);
1339
- opacity: var(--us-list-item-subtitle-opacity);
1340
- overflow: hidden;
1341
- color: var(--us-list-item-subtitle-color);
1342
- display: -webkit-box;
1343
- -webkit-box-orient: vertical;
1344
- -webkit-line-clamp: 1;
1384
+ .us-card--divider .us-card-header ~ .us-card-body::before {
1385
+ content: "";
1386
+ position: absolute;
1387
+ left: 0;
1388
+ right: 0;
1389
+ top: 0;
1390
+ border-top: 1px solid var(--us-card-border-color);
1345
1391
  }
1346
- .us-list-subheader--bordered {
1347
- border-bottom: var(--us-list-subheader-border-width) solid var(--us-list-subheader-border-color);
1392
+ .us-card--divider > .us-card-body:first-child, .us-card--divider :not([hidden]):first-child .us-card-body::before {
1393
+ border-top: none;
1348
1394
  }
1349
- .us-list-group .us-list {
1350
- --us-list-background: var(--us-list-group-background);
1395
+ .us-card--divider > .us-card-body:last-child, .us-card--divider :not([hidden]):last-child .us-card-body {
1396
+ margin-bottom: 0;
1351
1397
  }
1352
-
1353
- .us-data-list {
1354
- flex-grow: 1;
1355
- overflow: hidden;
1398
+ .us-card--divider > .us-card-body:last-child::after, .us-card--divider :not([hidden]):last-child .us-card-body::after {
1399
+ border-bottom: none;
1356
1400
  }
1357
1401
 
1358
- .us-menu {
1359
- margin: 0;
1360
- padding: var(--us-menu-padding-y) var(--us-menu-padding-x);
1361
- color: var(--us-menu-color);
1362
- background-color: var(--us-menu-background);
1402
+ .us-descriptions {
1403
+ display: grid;
1404
+ grid-template-columns: repeat(12, minmax(0, 1fr));
1405
+ row-gap: var(--us-descriptions-gap-y);
1406
+ column-gap: var(--us-descriptions-gap-x);
1363
1407
  }
1364
- .us-menu-item {
1408
+
1409
+ .us-description {
1365
1410
  position: relative;
1366
- height: var(--us-menu-item-height);
1367
- padding: var(--us-menu-item-padding-y) var(--us-menu-item-padding-x);
1368
- font-size: var(--us-menu-item-font-size);
1369
- font-weight: var(--us-menu-item-font-weight);
1370
- border-radius: var(--us-menu-item-border-radius);
1371
- text-decoration: none;
1372
- cursor: pointer;
1373
- z-index: 0;
1374
- display: flex;
1375
- align-items: center;
1376
- color: var(--us-menu-item-color);
1377
- background-color: var(--us-menu-item-background);
1378
- user-select: none;
1379
- -webkit-tap-highlight-color: transparent;
1380
- gap: var(--us-menu-item-gap);
1381
- }
1382
- .us-menu-item:hover {
1383
- text-decoration: none;
1384
- }
1385
- .us-menu-item--hoverable {
1386
- cursor: pointer;
1387
- user-select: none;
1411
+ padding-block: var(--us-description-padding-y);
1412
+ padding-inline: var(--us-description-padding-x);
1388
1413
  }
1389
- .us-menu-item--disabled {
1390
- opacity: 0.6;
1391
- pointer-events: none;
1414
+ .us-description__container {
1415
+ display: grid;
1416
+ grid-template-columns: repeat(12, minmax(0, 1fr));
1417
+ row-gap: var(--us-description-gap-y);
1418
+ column-gap: var(--us-description-gap-x);
1392
1419
  }
1393
- .us-menu-item__start-content {
1394
- flex-shrink: 0;
1395
- z-index: 1;
1420
+ .us-description-value {
1396
1421
  display: flex;
1397
- justify-content: center;
1398
1422
  align-items: center;
1399
1423
  }
1400
- .us-menu-item__start-content, .us-menu-item__end-content {
1424
+ .us-description-value__start-content, .us-description-value__end-content {
1401
1425
  flex-shrink: 0;
1402
- z-index: 1;
1403
- display: flex;
1404
- justify-content: center;
1405
- align-items: center;
1406
- gap: calc(var(--us-list-item-gap) * 0.5);
1407
1426
  }
1408
- .us-menu-item__content {
1427
+ .us-description-value__content {
1409
1428
  flex-grow: 1;
1410
- z-index: 1;
1411
- display: grid;
1412
- overflow: hidden;
1413
1429
  }
1414
- .us-menu-item__title {
1415
- overflow: hidden;
1416
- display: -webkit-box;
1417
- -webkit-box-orient: vertical;
1418
- -webkit-line-clamp: 1;
1419
- }
1420
- .us-menu-group {
1421
- position: relative;
1422
- height: var(--us-menu-group-height);
1423
- padding: var(--us-menu-group-padding-y) var(--us-menu-group-padding-x);
1424
- font-size: var(--us-menu-group-font-size);
1425
- font-weight: var(--us-menu-group-font-weight);
1426
- text-decoration: none;
1427
- border-bottom: var(--us-menu-group-border-width) solid var(--us-menu-group-border-color);
1428
- border-radius: var(--us-menu-group-border-radius);
1429
- display: flex;
1430
- align-items: center;
1431
- color: var(--us-menu-group-color);
1432
- background-color: var(--us-menu-group-background);
1433
- gap: var(--us-menu-group-gap);
1430
+ .us-descriptions--row .us-description-label {
1431
+ grid-column: span 6/span 6;
1434
1432
  }
1435
- .us-menu-group:hover {
1436
- text-decoration: none;
1433
+ .us-descriptions--row .us-description-value {
1434
+ grid-column: span 6/span 6;
1437
1435
  }
1438
- .us-menu-group__icon {
1439
- flex-shrink: 0;
1440
- z-index: 1;
1441
- display: flex;
1442
- justify-content: center;
1443
- align-items: center;
1436
+ .us-descriptions--col .us-description-label, .us-descriptions--col .us-description-value {
1437
+ grid-column: span 12/span 12;
1444
1438
  }
1445
- .us-menu-group__content {
1446
- flex-grow: 1;
1447
- z-index: 1;
1448
- display: grid;
1449
- overflow: hidden;
1439
+ .us-description-label {
1440
+ font-size: var(--us-description-label-font-size);
1441
+ font-weight: var(--us-description-label-font-weight);
1442
+ color: var(--us-description-label-color);
1443
+ opacity: var(--us-description-label-opacity);
1450
1444
  }
1451
- .us-menu-group__title {
1452
- overflow: hidden;
1453
- display: -webkit-box;
1454
- -webkit-box-orient: vertical;
1455
- -webkit-line-clamp: 1;
1445
+ .us-description-text {
1446
+ display: inline;
1447
+ font-size: var(--us-description-text-font-size);
1448
+ font-weight: var(--us-description-text-font-weight);
1449
+ color: var(--us-description-text-color);
1450
+ opacity: var(--us-description-text-opacity);
1451
+ word-break: break-word;
1456
1452
  }
1457
- .us-menu-submenu .us-menu {
1458
- --us-menu-background: var(--us-submenu-background);
1453
+ .us-description-empty {
1454
+ opacity: 0.75;
1455
+ user-select: none;
1456
+ cursor: default;
1459
1457
  }
1460
1458
 
1461
- .us-divider {
1459
+ .us-result {
1460
+ flex-grow: 1;
1462
1461
  width: 100%;
1463
- height: 1px;
1464
- background: var(--us-border-color);
1465
- }
1466
-
1467
- .us-breadcrumb {
1468
- padding: 0.5rem 0;
1469
- font-size: 0.875rem;
1462
+ padding-block: var(--us-result-padding-y);
1463
+ padding-inline: var(--us-result-padding-x);
1470
1464
  display: flex;
1465
+ flex-direction: column;
1466
+ justify-content: center;
1471
1467
  align-items: center;
1472
- gap: 0;
1468
+ gap: var(--us-result-gap);
1473
1469
  }
1474
- .us-breadcrumb-item {
1475
- padding: 0.25rem 0.5rem;
1476
- white-space: nowrap;
1470
+ .us-result__content {
1471
+ text-align: center;
1477
1472
  display: flex;
1478
- align-items: center;
1473
+ flex-direction: column;
1474
+ gap: var(--us-result-content-gap);
1479
1475
  }
1480
- .us-breadcrumb-item:not(.us-breadcrumb-item--is-menu) {
1481
- line-height: 32px;
1476
+ .us-result__title {
1477
+ font-size: var(--us-result-title-font-size);
1478
+ font-weight: var(--us-result-title-font-weight);
1482
1479
  }
1483
-
1484
- .us-swipe {
1485
- position: relative;
1480
+ .us-result__subtitle {
1481
+ font-size: var(--us-result-subtitle-font-size);
1482
+ font-weight: var(--us-result-subtitle-font-weight);
1486
1483
  }
1487
- .us-swipe__content {
1484
+
1485
+ .us-nav-rail {
1486
+ flex-shrink: 0;
1488
1487
  position: relative;
1489
- overflow-x: hidden;
1488
+ width: 73px;
1489
+ height: 100%;
1490
+ overflow: hidden;
1490
1491
  display: flex;
1491
- align-items: center;
1492
- gap: var(--us-swipe-gap);
1493
- }
1494
- @media (max-width: 767px) and (hover: none) {
1495
- .us-swipe__content {
1496
- overflow-x: auto;
1497
- }
1498
- }
1499
- .us-swipe__start-content, .us-swipe__end-content {
1500
- position: absolute;
1501
- top: 50%;
1502
- transform: translateY(-50%);
1503
- z-index: 1;
1504
- }
1505
- .us-swipe__start-content {
1506
- left: -1.25rem;
1492
+ flex-direction: column;
1507
1493
  }
1508
- .us-swipe__end-content {
1509
- right: -1.25rem;
1494
+ .us-nav-rail--left {
1495
+ border-right-width: 1px;
1496
+ border-right-color: var(--us-nav-rail-border-color);
1497
+ border-right-style: solid;
1510
1498
  }
1511
- .us-swipe--auto-hide .us-swipe__start-content, .us-swipe--auto-hide .us-swipe__end-content {
1512
- transform: translateY(-50%) scale(0);
1513
- transition: all 0.2s ease-in-out;
1499
+ .us-nav-rail--right {
1500
+ border-left-width: 1px;
1501
+ border-left-color: var(--us-nav-rail-border-color);
1502
+ border-left-style: solid;
1514
1503
  }
1515
- .us-swipe--auto-hide:hover .us-swipe__start-content, .us-swipe--auto-hide:hover .us-swipe__end-content {
1516
- transform: translateY(-50%) scale(1);
1504
+ .us-nav-rail__start-content, .us-nav-rail__end-content {
1505
+ flex-shrink: 0;
1517
1506
  }
1518
- .us-swipe--start .us-swipe-item:last-child {
1519
- margin-right: auto;
1507
+ .us-nav-rail__start-content {
1508
+ padding-block: var(--us-nav-rail-start-content-padding-y);
1509
+ padding-inline: var(--us-nav-rail-start-content-padding-x);
1510
+ gap: var(--us-nav-rail-start-content-gap);
1520
1511
  }
1521
- .us-swipe--center .us-swipe-item:first-child {
1522
- margin-left: auto;
1512
+ .us-nav-rail__end-content {
1513
+ padding-block: var(--us-nav-rail-end-content-padding-y);
1514
+ padding-inline: var(--us-nav-rail-end-content-padding-x);
1515
+ gap: var(--us-nav-rail-end-content-gap);
1523
1516
  }
1524
- .us-swipe--center .us-swipe-item:last-child {
1525
- margin-right: auto;
1517
+ .us-nav-rail__content {
1518
+ flex-grow: 1;
1519
+ padding-block: var(--us-nav-rail-content-padding-y);
1520
+ padding-inline: var(--us-nav-rail-content-padding-x);
1521
+ gap: var(--us-nav-rail-content-gap);
1526
1522
  }
1527
- .us-swipe--end .us-swipe-item:first-child {
1528
- margin-left: auto;
1523
+ .us-nav-rail__start-content, .us-nav-rail__end-content, .us-nav-rail__content {
1524
+ display: flex;
1525
+ flex-direction: column;
1529
1526
  }
1530
- .us-swipe-item {
1527
+ .us-nav-rail-item {
1531
1528
  flex-shrink: 0;
1529
+ padding-block: var(--us-nav-rail-item-padding-y);
1530
+ padding-inline: var(--us-nav-rail-item-padding-x);
1532
1531
  position: relative;
1533
- }
1534
-
1535
- .us-tabs {
1536
- width: 100%;
1537
- white-space: nowrap;
1538
- flex-wrap: wrap;
1532
+ text-decoration: none;
1533
+ opacity: var(--us-nav-rail-item-opacity);
1534
+ border-radius: var(--us-nav-rail-item-border-radius);
1535
+ cursor: default;
1536
+ color: var(--us-nav-rail-item-color);
1537
+ background-color: var(--us-nav-rail-item-background);
1539
1538
  display: flex;
1540
- align-items: center;
1541
- }
1542
- .us-tabs--start {
1543
- justify-content: flex-start;
1544
- }
1545
- .us-tabs--center {
1546
- justify-content: center;
1539
+ user-select: none;
1547
1540
  }
1548
- .us-tabs--end {
1549
- justify-content: flex-end;
1541
+ .us-nav-rail-item__indicator {
1542
+ position: absolute;
1543
+ top: 0;
1544
+ bottom: 0;
1545
+ z-index: 1;
1546
+ width: var(--us-nav-rail-item-indicator-size);
1547
+ z-index: 1;
1548
+ background: var(--us-nav-rail-item-indicator-color);
1549
+ transform: translateX(calc(var(--us-nav-rail-item-indicator-size) * -1));
1550
+ transition: transform 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09), inset 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09);
1550
1551
  }
1551
- .us-tabs--stretch .us-tab {
1552
+ .us-nav-rail-item__content {
1552
1553
  flex-grow: 1;
1553
- }
1554
- @media (max-width: 767px) and (hover: none) {
1555
- .us-tabs {
1556
- overflow: auto;
1557
- }
1558
- }
1559
-
1560
- .us-tab {
1561
1554
  position: relative;
1562
- padding-block: var(--us-tab-padding-y);
1563
- padding-inline: var(--us-tab-padding-x);
1564
- font-size: var(--us-tab-font-size);
1565
- font-weight: var(--us-tab-font-weight);
1566
- text-decoration: none;
1567
- vertical-align: middle;
1568
- border-radius: var(--us-tab-border-radius);
1569
- z-index: 1;
1570
- color: var(--us-tab-color);
1571
- display: inline-flex;
1555
+ padding-block: var(--us-nav-rail-item-content-padding-y);
1556
+ padding-inline: var(--us-nav-rail-item-content-padding-x);
1557
+ display: flex;
1558
+ flex-direction: column;
1572
1559
  justify-content: center;
1573
1560
  align-items: center;
1574
- user-select: none;
1575
- -webkit-tap-highlight-color: transparent;
1576
- }
1577
- .us-tab:hover {
1578
- text-decoration: none;
1579
- }
1580
- .us-tab--disabled {
1581
- opacity: 0.6;
1582
- pointer-events: none;
1583
- }
1584
- .us-tab--closable {
1585
- padding-inline-end: calc(var(--us-tab-padding-x) / 2);
1561
+ gap: var(--us-nav-rail-item-gap);
1586
1562
  }
1587
- .us-tab__start-content, .us-tab__end-content {
1563
+ .us-nav-rail-item__media {
1564
+ position: relative;
1565
+ outline-width: var(--us-nav-rail-item-media-border-width);
1566
+ outline-style: var(--us-nav-rail-item-media-border-style);
1567
+ outline-color: var(--us-nav-rail-item-media-border-color);
1568
+ width: var(--us-nav-rail-item-media-width);
1569
+ height: var(--us-nav-rail-item-media-height);
1570
+ border-radius: var(--us-nav-rail-item-media-border-radius);
1571
+ overflow: hidden;
1588
1572
  display: flex;
1573
+ justify-content: center;
1589
1574
  align-items: center;
1575
+ transition: transform 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09);
1590
1576
  }
1591
- .us-tab__content {
1592
- position: relative;
1593
- height: var(--us-tab-height);
1594
- display: inline-flex;
1595
- flex-direction: row;
1577
+ .us-nav-rail-item__icon {
1578
+ padding-block: var(--us-nav-rail-item-icon-padding-y);
1579
+ padding-inline: var(--us-nav-rail-item-icon-padding-x);
1580
+ display: flex;
1596
1581
  justify-content: center;
1597
1582
  align-items: center;
1598
- gap: 8px;
1599
1583
  }
1600
- .us-tab__indicator {
1601
- position: absolute;
1602
- height: var(--us-tab-indicator-height);
1603
- border-radius: var(--us-tab-indicator-border-radius);
1604
- inset: auto 0px 0px;
1605
- opacity: 0;
1606
- z-index: -1;
1607
- color: var(--us-tab-indicator-color);
1608
- transform-origin: left bottom;
1584
+ .us-nav-rail-item__icon .us-icon {
1585
+ font-size: var(--us-nav-rail-item-icon-font-size);
1609
1586
  }
1610
- .us-tab--selected .us-tab__indicator {
1611
- opacity: 1;
1587
+ .us-nav-rail-item__label {
1588
+ position: absolute;
1589
+ bottom: calc((var(--us-nav-rail-item-label-font-size) + var(--us-nav-rail-item-gap, 0)) * -1);
1590
+ left: 50%;
1591
+ transform: translateX(-50%);
1592
+ font-size: var(--us-nav-rail-item-label-font-size);
1593
+ font-weight: var(--us-nav-rail-item-label-font-weight);
1594
+ line-height: var(--us-nav-rail-item-label-line-height);
1595
+ width: 100%;
1596
+ text-align: center;
1597
+ overflow: hidden;
1598
+ display: -webkit-box;
1599
+ -webkit-box-orient: vertical;
1600
+ -webkit-line-clamp: 1;
1601
+ transition: opacity 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09);
1612
1602
  }
1613
- .us-tab__closable {
1614
- position: relative;
1615
- padding: 0.125rem;
1616
- color: var(--us-tab-closable-color);
1617
- border-radius: 9999px;
1618
- transform: scale(0.75);
1619
- cursor: pointer;
1620
- transition: all 0.15s ease-in-out;
1603
+ .us-nav-rail-item--selected {
1604
+ color: var(--us-_active-nav-rail-item-color);
1621
1605
  }
1622
- .us-tab__closable:hover {
1623
- transform: scale(1);
1606
+ .us-nav-rail-item--selected .us-nav-rail-item__media {
1607
+ outline-color: var(--us-_active-nav-rail-item-media-border-color);
1624
1608
  }
1625
- .us-tab__closable::after {
1626
- position: absolute;
1627
- content: "";
1628
- inset: 0px;
1629
- border-radius: inherit;
1630
- background-color: currentColor;
1631
- opacity: 0;
1609
+ .us-nav-rail-item--selected .us-nav-rail-item__icon, .us-nav-rail-item:hover .us-nav-rail-item__icon {
1610
+ transform: scale(1.15);
1611
+ }
1612
+ .us-nav-rail-item--selected .us-nav-rail-item__indicator, .us-nav-rail-item--selected:hover .us-nav-rail-item__indicator {
1613
+ color: var(--us-_active-nav-rail-item-indicator-color);
1614
+ }
1615
+ .us-nav-rail-item--selected .us-nav-rail-item__indicator, .us-nav-rail-item:hover .us-nav-rail-item__indicator {
1616
+ transform: translateX(0px);
1617
+ }
1618
+ .us-nav-rail--left .us-nav-rail-item__indicator {
1619
+ left: -25%;
1620
+ border-radius: 0px var(--us-nav-rail-item-indicator-border-radius) var(--us-nav-rail-item-indicator-border-radius) 0px;
1621
+ }
1622
+ .us-nav-rail--right .us-nav-rail-item__indicator {
1623
+ right: -25%;
1624
+ border-radius: var(--us-nav-rail-item-indicator-border-radius) 0px 0px var(--us-nav-rail-item-indicator-border-radius);
1625
+ }
1626
+ .us-nav-rail--left .us-nav-rail-item--selected .us-nav-rail-item__indicator, .us-nav-rail--left .us-nav-rail-item--selected:hover .us-nav-rail-item__indicator {
1627
+ left: 0px;
1628
+ }
1629
+ .us-nav-rail--right .us-nav-rail-item--selected .us-nav-rail-item__indicator, .us-nav-rail--right .us-nav-rail-item--selected:hover .us-nav-rail-item__indicator {
1630
+ right: 0px;
1632
1631
  }
1633
1632
 
1634
- .us-card {
1635
- position: relative;
1636
- border-radius: var(--us-card-border-radius);
1637
- z-index: 0;
1633
+ .us-steps {
1634
+ flex-shrink: 0;
1635
+ display: grid;
1638
1636
  overflow: hidden;
1639
- -webkit-tap-highlight-color: transparent;
1640
- background-color: white;
1641
- padding-block: var(--us-card-padding-y);
1642
- padding-inline: var(--us-card-padding-x);
1643
- display: flex;
1644
- flex-direction: column;
1645
- gap: var(--us-card-gap);
1646
1637
  }
1647
- .us-card:hover {
1648
- text-decoration: none;
1638
+ .us-steps--horizontal {
1639
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
1649
1640
  }
1650
- .us-card--bordered {
1651
- border: var(--us-card-border-width) var(--us-card-border-style) var(--us-card-border-color);
1641
+ .us-steps--vertical {
1642
+ grid-template-columns: 1;
1643
+ gap: 2rem;
1652
1644
  }
1653
- .us-card--shadow {
1654
- box-shadow: var(--us-card-box-shadow);
1645
+ .us-steps--vertical .us-step {
1646
+ flex-direction: row;
1647
+ gap: 1.5rem;
1655
1648
  }
1656
- .us-card--hoverable, .us-card--selected {
1657
- cursor: pointer;
1658
- user-select: none;
1649
+ .us-steps--vertical .us-step__content {
1650
+ padding: 4px 0px;
1659
1651
  }
1660
- .us-card--disabled {
1661
- opacity: 0.6;
1662
- cursor: not-allowed;
1663
- user-select: none;
1652
+ .us-steps--vertical .us-step__title, .us-steps--vertical .us-step__subtitle {
1653
+ margin: 0;
1654
+ text-align: start;
1664
1655
  }
1665
- .us-card-header {
1656
+ .us-steps--vertical .us-steps__indicator {
1657
+ width: 1px;
1658
+ height: 100%;
1659
+ top: -50%;
1660
+ bottom: 50%;
1661
+ left: auto;
1662
+ right: auto;
1663
+ }
1664
+
1665
+ .us-step {
1666
1666
  position: relative;
1667
- flex-shrink: 0;
1668
- height: var(--us-card-header-height);
1669
- min-height: var(--us-card-header-min-height);
1670
- padding-block: var(--us-card-header-padding-y);
1671
- padding-inline: var(--us-card-header-padding-x);
1672
- color: var(--us-card-header-color);
1673
1667
  display: flex;
1674
- align-items: center;
1675
- gap: var(--us-card-header-gap);
1668
+ flex-direction: column;
1669
+ gap: 0.5rem;
1676
1670
  }
1677
- .us-card-header__start-content, .us-card-header__end-content {
1678
- flex-shrink: 0;
1671
+ .us-step--completed {
1672
+ --us-step-divider-color: var(--us-_completed-step-divider-color);
1673
+ }
1674
+ .us-step--current {
1675
+ --us-step-divider-color: var(--us-_current-step-divider-color);
1676
+ }
1677
+ .us-step--disabled {
1678
+ opacity: 0.65;
1679
+ pointer-events: none;
1680
+ }
1681
+ .us-step__header {
1682
+ position: relative;
1679
1683
  display: flex;
1684
+ flex-direction: column;
1680
1685
  align-items: center;
1681
- gap: var(--us-card-header-content-gap);
1686
+ gap: 1rem;
1682
1687
  }
1683
- .us-card-header__content {
1684
- flex-grow: 1;
1685
- overflow: hidden;
1688
+ .us-step__avatar-wrapper {
1689
+ border: 2px solid transparent;
1690
+ padding: 2px;
1691
+ border-radius: 50%;
1692
+ }
1693
+ .us-step__avatar {
1694
+ position: relative;
1695
+ flex-shrink: 0;
1696
+ width: 44px;
1697
+ height: 44px;
1698
+ border-radius: 50%;
1699
+ font-size: var(--us-step-indicator-font-size);
1700
+ font-weight: var(--us-step-indicator-font-weight);
1701
+ color: var(--us-step-indicator-color);
1702
+ background-color: var(--us-step-background-color);
1686
1703
  display: flex;
1687
- flex-direction: column;
1688
1704
  justify-content: center;
1705
+ align-items: center;
1706
+ z-index: 1;
1689
1707
  }
1690
- .us-card-header--centered .us-card-header__start-content, .us-card-header--centered .us-card-header__end-content {
1691
- position: absolute;
1692
- }
1693
- .us-card-header--centered .us-card-header__start-content {
1694
- left: var(--us-card-header-padding-x);
1708
+ .us-step--current .us-step__avatar-wrapper {
1709
+ border-color: var(--us-_current-step-border-color);
1695
1710
  }
1696
- .us-card-header--centered .us-card-header__end-content {
1697
- right: var(--us-card-header-padding-x);
1711
+ .us-step__content {
1712
+ display: flex;
1713
+ flex-direction: column;
1714
+ gap: 0.5rem;
1698
1715
  }
1699
- .us-card-header--centered .us-card-header__content {
1700
- align-items: center;
1716
+ .us-step__title {
1717
+ flex-shrink: 0;
1718
+ max-width: 150px;
1719
+ margin: 0 auto;
1720
+ font-size: 0.875rem;
1721
+ font-weight: 500;
1701
1722
  text-align: center;
1702
- }
1703
- .us-card-header .us-card-title {
1704
- font-size: var(--us-card-header-title-font-size);
1705
- font-weight: var(--us-card-header-title-font-weight);
1706
- line-height: var(--us-card-header-title-line-height);
1707
1723
  overflow: hidden;
1708
- color: var(--us-card-header-title-color);
1709
1724
  display: -webkit-box;
1710
1725
  -webkit-box-orient: vertical;
1711
- -webkit-line-clamp: 1;
1726
+ -webkit-line-clamp: 2;
1712
1727
  }
1713
- .us-card-header .us-card-subtitle {
1714
- font-size: var(--us-card-header-subtitle-font-size);
1715
- font-weight: var(--us-card-header-subtitle-font-weight);
1716
- line-height: var(--us-card-header-subtitle-line-height);
1728
+ .us-step__subtitle {
1729
+ flex-shrink: 0;
1730
+ max-width: 150px;
1731
+ margin: 0 auto;
1732
+ font-size: 0.75rem;
1733
+ text-align: center;
1717
1734
  overflow: hidden;
1718
- color: var(--us-card-header-subtitle-color);
1719
1735
  display: -webkit-box;
1720
1736
  -webkit-box-orient: vertical;
1721
- -webkit-line-clamp: 1;
1737
+ -webkit-line-clamp: 2;
1738
+ opacity: 0.75;
1722
1739
  }
1723
- .us-card .us-card-title:not(.us-card-header .us-card-title) {
1724
- flex-shrink: 0;
1725
- padding-block: var(--us-card-title-padding-y);
1726
- padding-inline: var(--us-card-title-padding-x);
1727
- font-size: var(--us-card-title-font-size);
1728
- font-weight: var(--us-card-title-font-weight);
1729
- line-height: var(--us-card-title-line-height);
1730
- color: var(--us-card-title-color);
1740
+
1741
+ .us-steps {
1742
+ position: relative;
1731
1743
  }
1732
- .us-card .us-card-title--centered:not(.us-card-header .us-card-title) {
1733
- text-align: center;
1744
+ .us-steps__indicator {
1745
+ position: absolute;
1746
+ flex-grow: 1;
1747
+ position: absolute;
1748
+ right: 50%;
1749
+ top: 50%;
1750
+ left: -50%;
1751
+ width: 100%;
1752
+ height: 1px;
1753
+ background-color: var(--us-step-divider-color);
1754
+ z-index: -1;
1734
1755
  }
1735
- .us-card .us-card-subtitle:not(.us-card-header .us-card-subtitle) {
1736
- flex-shrink: 0;
1737
- font-size: var(--us-card-header-subtitle-font-size);
1738
- font-weight: var(--us-card-header-subtitle-font-weight);
1739
- line-height: var(--us-card-header-subtitle-line-height);
1740
- overflow: hidden;
1741
- color: var(--us-card-header-subtitle-color);
1756
+ .us-steps__indicator--completed {
1757
+ border-bottom-color: var(--us-_completed-step-divider-color);
1742
1758
  }
1743
- .us-card-body {
1744
- position: relative;
1745
- padding-block: var(--us-card-body-padding-y);
1746
- padding-inline: var(--us-card-body-padding-x);
1747
- font-size: var(--us-card-body-font-size);
1748
- line-height: var(--us-card-body-line-height);
1749
- color: var(--us-card-body-color);
1759
+ .us-steps__indicator--current {
1760
+ border-bottom-color: var(--us-_current-step-divider-color);
1750
1761
  }
1751
- .us-card-footer {
1752
- flex-shrink: 0;
1753
- position: relative;
1754
- min-height: var(--us-card-footer-min-height);
1755
- padding-block: var(--us-card-footer-padding-y);
1756
- padding-inline: var(--us-card-footer-padding-x);
1757
- border-top-width: 0px;
1758
- border-top-style: solid;
1759
- border-top-color: var(--us-card-footer-border-color);
1760
- background-color: var(--us-card-footer-background);
1761
- display: flex;
1762
- justify-content: flex-end;
1763
- align-items: center;
1764
- gap: 0.5rem;
1765
- }
1766
- .us-card-media {
1762
+
1763
+ .us-input {
1767
1764
  position: relative;
1768
- margin: 8px;
1769
- border-radius: 8px;
1770
- aspect-ratio: 1/1;
1771
- overflow: hidden;
1765
+ width: 100%;
1766
+ padding: 0;
1767
+ min-height: var(--us-input-height);
1772
1768
  display: flex;
1773
- justify-content: center;
1774
1769
  align-items: center;
1775
- background-color: rgba(0, 0, 0, 0.08);
1776
- }
1777
- .us-card-media__top-left-content {
1778
- padding: 4px;
1779
- position: absolute;
1780
- top: 0;
1781
- left: 0;
1782
- }
1783
- .us-card-media__top-right-content {
1784
- padding: 4px;
1785
- position: absolute;
1786
- top: 0;
1787
- right: 0;
1788
- }
1789
- .us-card-media img {
1790
- width: 100%;
1791
- height: 100%;
1792
- object-fit: cover;
1770
+ border: none;
1771
+ border-radius: var(--us-input-border-radius);
1772
+ color: var(--us-input-color);
1773
+ background-color: var(--us-input-background);
1774
+ z-index: 0;
1775
+ transition: all 0.2s ease-in-out;
1776
+ cursor: text;
1793
1777
  }
1794
- .us-card--divider .us-card-body {
1795
- margin-top: var(--us-card-padding-y);
1778
+ .us-input:focus-visible {
1779
+ outline: none;
1796
1780
  }
1797
- .us-card--divider .us-card-body::after {
1798
- content: "";
1799
- position: absolute;
1800
- left: 0;
1801
- right: 0;
1802
- bottom: 0;
1803
- border-bottom: 1px solid var(--us-card-border-color);
1781
+ .us-input--selectable {
1782
+ cursor: pointer;
1804
1783
  }
1805
- .us-card--divider .us-card-header ~ .us-card-body {
1806
- margin-bottom: var(--us-card-padding-y);
1784
+ .us-input--disabled {
1785
+ opacity: 0.75;
1786
+ pointer-events: none;
1807
1787
  }
1808
- .us-card--divider .us-card-header ~ .us-card-body::before {
1809
- content: "";
1810
- position: absolute;
1811
- left: 0;
1812
- right: 0;
1813
- top: 0;
1814
- border-top: 1px solid var(--us-card-border-color);
1788
+ .us-input--read-only {
1789
+ pointer-events: none;
1815
1790
  }
1816
- .us-card--divider > .us-card-body:first-child, .us-card--divider :not([hidden]):first-child .us-card-body::before {
1817
- border-top: none;
1791
+ .us-input--clearable .us-input__clearable {
1792
+ transform: scale(0);
1793
+ transition: all 0.2s ease-in-out;
1818
1794
  }
1819
- .us-card--divider > .us-card-body:last-child, .us-card--divider :not([hidden]):last-child .us-card-body {
1820
- margin-bottom: 0;
1795
+ .us-input--clearable:hover .us-input__clearable {
1796
+ transform: scale(0.75);
1821
1797
  }
1822
- .us-card--divider > .us-card-body:last-child::after, .us-card--divider :not([hidden]):last-child .us-card-body::after {
1823
- border-bottom: none;
1798
+ .us-input-group {
1799
+ display: flex;
1800
+ align-items: center;
1824
1801
  }
1825
-
1826
- .us-descriptions {
1827
- display: grid;
1828
- grid-template-columns: repeat(12, minmax(0, 1fr));
1829
- row-gap: var(--us-descriptions-gap-y);
1830
- column-gap: var(--us-descriptions-gap-x);
1802
+ .us-input-group .us-input {
1803
+ border-radius: 0px;
1831
1804
  }
1832
-
1833
- .us-description {
1834
- position: relative;
1835
- padding-block: var(--us-description-padding-y);
1836
- padding-inline: var(--us-description-padding-x);
1805
+ .us-input-group .us-input:first-of-type {
1806
+ border-top-left-radius: var(--us-input-border-radius);
1807
+ border-bottom-left-radius: var(--us-input-border-radius);
1837
1808
  }
1838
- .us-description__container {
1839
- display: grid;
1840
- grid-template-columns: repeat(12, minmax(0, 1fr));
1841
- row-gap: var(--us-description-gap-y);
1842
- column-gap: var(--us-description-gap-x);
1809
+ .us-input-group .us-input:last-of-type {
1810
+ border-top-right-radius: var(--us-input-border-radius);
1811
+ border-bottom-right-radius: var(--us-input-border-radius);
1843
1812
  }
1844
- .us-description-value {
1813
+ .us-input__icon {
1814
+ padding: 0;
1845
1815
  display: flex;
1816
+ justify-content: center;
1846
1817
  align-items: center;
1818
+ border: none;
1819
+ outline: none;
1820
+ background-color: transparent;
1847
1821
  }
1848
- .us-description-value__start-content, .us-description-value__end-content {
1849
- flex-shrink: 0;
1850
- }
1851
- .us-description-value__content {
1852
- flex-grow: 1;
1822
+ .us-input__icon--opacity {
1823
+ opacity: 0;
1853
1824
  }
1854
- .us-descriptions--row .us-description-label {
1855
- grid-column: span 6/span 6;
1825
+ .us-input__icon--pointer {
1826
+ cursor: pointer;
1856
1827
  }
1857
- .us-descriptions--row .us-description-value {
1858
- grid-column: span 6/span 6;
1828
+ .us-input:hover .us-input__icon--opacity-hoverable {
1829
+ opacity: 0.5;
1859
1830
  }
1860
- .us-descriptions--col .us-description-label, .us-descriptions--col .us-description-value {
1861
- grid-column: span 12/span 12;
1831
+ .us-input:hover .us-input__icon--opacity-hoverable:hover {
1832
+ opacity: 1;
1862
1833
  }
1863
- .us-description-label {
1864
- font-size: var(--us-description-label-font-size);
1865
- font-weight: var(--us-description-label-font-weight);
1866
- color: var(--us-description-label-color);
1867
- opacity: var(--us-description-label-opacity);
1834
+ .us-input__content {
1835
+ flex: 1;
1836
+ height: 100%;
1837
+ display: flex;
1838
+ align-items: center;
1839
+ z-index: 1;
1840
+ overflow: hidden;
1868
1841
  }
1869
- .us-description-text {
1870
- display: inline;
1871
- font-size: var(--us-description-text-font-size);
1872
- font-weight: var(--us-description-text-font-weight);
1873
- color: var(--us-description-text-color);
1874
- opacity: var(--us-description-text-opacity);
1875
- word-break: break-word;
1842
+ .us-input__content--chips {
1843
+ padding-block: var(--us-input-padding-y);
1844
+ padding-inline: var(--us-input-padding-x);
1845
+ flex-grow: 1;
1846
+ display: flex;
1847
+ flex-wrap: wrap;
1848
+ gap: 0.25rem;
1876
1849
  }
1877
- .us-description-empty {
1878
- opacity: 0.75;
1879
- user-select: none;
1880
- cursor: default;
1850
+ .us-input__content--chips input {
1851
+ flex: 1;
1852
+ height: 24px;
1853
+ border: none;
1854
+ outline: none;
1855
+ color: inherit;
1856
+ background: inherit;
1857
+ min-width: 0;
1881
1858
  }
1882
-
1883
- .us-result {
1884
- flex-grow: 1;
1859
+ .us-input__field {
1860
+ flex: 1;
1885
1861
  width: 100%;
1886
- padding-block: var(--us-result-padding-y);
1887
- padding-inline: var(--us-result-padding-x);
1862
+ height: 100%;
1863
+ padding-block: var(--us-input-padding-y);
1864
+ padding-inline: var(--us-input-padding-x);
1865
+ font-size: var(--us-input-font-size);
1866
+ font-family: var(--us-input-font-family);
1867
+ line-height: var(--us-input-line-height);
1868
+ border: none;
1869
+ outline: none;
1870
+ color: var(--us-input-color);
1871
+ background-color: transparent;
1888
1872
  display: flex;
1889
- flex-direction: column;
1890
- justify-content: center;
1891
1873
  align-items: center;
1892
- gap: var(--us-result-gap);
1893
1874
  }
1894
- .us-result__content {
1895
- text-align: center;
1896
- display: flex;
1897
- flex-direction: column;
1898
- gap: var(--us-result-content-gap);
1875
+ .us-input__field:focus {
1876
+ outline: none !important;
1899
1877
  }
1900
- .us-result__title {
1901
- font-size: var(--us-result-title-font-size);
1902
- font-weight: var(--us-result-title-font-weight);
1878
+ .us-input__field::placeholder {
1879
+ color: var(--us-input-placeholder-color);
1903
1880
  }
1904
- .us-result__subtitle {
1905
- font-size: var(--us-result-subtitle-font-size);
1906
- font-weight: var(--us-result-subtitle-font-weight);
1881
+ .us-input__search, .us-input__placeholder {
1882
+ flex: 1;
1883
+ width: 100%;
1884
+ padding-block: var(--us-input-padding-y);
1885
+ padding-inline: var(--us-input-padding-x);
1886
+ font-size: var(--us-input-font-size);
1887
+ font-family: var(--us-input-font-family);
1888
+ line-height: var(--us-input-line-height);
1889
+ color: var(--us-input-color);
1890
+ overflow: hidden;
1891
+ text-overflow: ellipsis;
1892
+ white-space: nowrap;
1893
+ display: block;
1907
1894
  }
1908
-
1909
- .us-nav-rail {
1895
+ .us-input__placeholder {
1896
+ color: var(--us-input-placeholder-color);
1897
+ }
1898
+ .us-input__start-content, .us-input__end-content {
1910
1899
  flex-shrink: 0;
1911
- position: relative;
1912
- width: 73px;
1913
1900
  height: 100%;
1914
- overflow: hidden;
1915
1901
  display: flex;
1916
- flex-direction: column;
1902
+ align-items: center;
1903
+ font-size: var(--us-input-font-size);
1904
+ font-family: var(--us-input-font-family);
1905
+ line-height: var(--us-input-line-height);
1906
+ gap: var(--us-input-content-gap);
1917
1907
  }
1918
- .us-nav-rail--left {
1919
- border-right-width: 1px;
1920
- border-right-color: var(--us-nav-rail-border-color);
1921
- border-right-style: solid;
1908
+ .us-input__start-content .us-icon, .us-input__end-content .us-icon {
1909
+ font-size: var(--us-input-icon-size);
1922
1910
  }
1923
- .us-nav-rail--right {
1924
- border-left-width: 1px;
1925
- border-left-color: var(--us-nav-rail-border-color);
1926
- border-left-style: solid;
1911
+ .us-input__start-content {
1912
+ padding-left: calc(0.75 * var(--us-input-padding-x));
1913
+ padding-right: calc(0.375 * var(--us-input-padding-x));
1927
1914
  }
1928
- .us-nav-rail__start-content, .us-nav-rail__end-content {
1929
- flex-shrink: 0;
1915
+ .us-input__end-content {
1916
+ padding-inline: calc(0.75 * var(--us-input-padding-x));
1930
1917
  }
1931
- .us-nav-rail__start-content {
1932
- padding-block: var(--us-nav-rail-start-content-padding-y);
1933
- padding-inline: var(--us-nav-rail-start-content-padding-x);
1934
- gap: var(--us-nav-rail-start-content-gap);
1918
+ .us-input--start-content .us-input__content .us-input__field, .us-input--start-content .us-input__content .us-input__search, .us-input--start-content .us-input__content .us-input__placeholder {
1919
+ padding-left: 0;
1935
1920
  }
1936
- .us-nav-rail__end-content {
1937
- padding-block: var(--us-nav-rail-end-content-padding-y);
1938
- padding-inline: var(--us-nav-rail-end-content-padding-x);
1939
- gap: var(--us-nav-rail-end-content-gap);
1921
+ .us-input--end-content .us-input__content .us-input__field, .us-input--end-content .us-input__content .us-input__search, .us-input--end-content .us-input__content .us-input__placeholder {
1922
+ padding-right: 0;
1940
1923
  }
1941
- .us-nav-rail__content {
1942
- flex-grow: 1;
1943
- padding-block: var(--us-nav-rail-content-padding-y);
1944
- padding-inline: var(--us-nav-rail-content-padding-x);
1945
- gap: var(--us-nav-rail-content-gap);
1924
+
1925
+ .us-checkbox {
1926
+ cursor: pointer;
1927
+ display: inline-flex;
1928
+ align-items: center;
1929
+ gap: var(--us-checkbox-gap);
1930
+ -webkit-tap-highlight-color: transparent;
1946
1931
  }
1947
- .us-nav-rail__start-content, .us-nav-rail__end-content, .us-nav-rail__content {
1948
- display: flex;
1949
- flex-direction: column;
1932
+ .us-checkbox input {
1933
+ position: absolute;
1934
+ width: 0;
1935
+ height: 0;
1936
+ opacity: 0;
1950
1937
  }
1951
- .us-nav-rail-item {
1952
- flex-shrink: 0;
1953
- padding-block: var(--us-nav-rail-item-padding-y);
1954
- padding-inline: var(--us-nav-rail-item-padding-x);
1955
- position: relative;
1956
- text-decoration: none;
1957
- opacity: var(--us-nav-rail-item-opacity);
1958
- border-radius: var(--us-nav-rail-item-border-radius);
1959
- cursor: default;
1960
- color: var(--us-nav-rail-item-color);
1961
- background-color: var(--us-nav-rail-item-background);
1962
- display: flex;
1963
- user-select: none;
1938
+ .us-checkbox--disabled {
1939
+ opacity: 0.6;
1940
+ pointer-events: none;
1964
1941
  }
1965
- .us-nav-rail-item__indicator {
1966
- position: absolute;
1967
- top: 0;
1968
- bottom: 0;
1969
- z-index: 1;
1970
- width: var(--us-nav-rail-item-indicator-size);
1971
- z-index: 1;
1972
- background: var(--us-nav-rail-item-indicator-color);
1973
- transform: translateX(calc(var(--us-nav-rail-item-indicator-size) * -1));
1974
- transition: transform 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09), inset 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09);
1942
+ .us-checkbox--read-only {
1943
+ pointer-events: none;
1975
1944
  }
1976
- .us-nav-rail-item__content {
1977
- flex-grow: 1;
1945
+ .us-checkbox__control {
1978
1946
  position: relative;
1979
- padding-block: var(--us-nav-rail-item-content-padding-y);
1980
- padding-inline: var(--us-nav-rail-item-content-padding-x);
1947
+ width: var(--us-checkbox-control-width);
1948
+ height: var(--us-checkbox-control-height);
1949
+ border-width: var(--us-checkbox-control-border-width);
1950
+ border-style: var(--us-checkbox-control-border-style);
1951
+ border-color: var(--us-checkbox-control-border-color);
1952
+ border-radius: var(--us-checkbox-control-border-radius);
1953
+ color: var(--us-checkbox-control-color);
1981
1954
  display: flex;
1982
- flex-direction: column;
1983
1955
  justify-content: center;
1984
1956
  align-items: center;
1985
- gap: var(--us-nav-rail-item-gap);
1986
- }
1987
- .us-nav-rail-item__media {
1988
- position: relative;
1989
- outline-width: var(--us-nav-rail-item-media-border-width);
1990
- outline-style: var(--us-nav-rail-item-media-border-style);
1991
- outline-color: var(--us-nav-rail-item-media-border-color);
1992
- width: var(--us-nav-rail-item-media-width);
1993
- height: var(--us-nav-rail-item-media-height);
1994
- border-radius: var(--us-nav-rail-item-media-border-radius);
1957
+ transition: color 0.05s ease-in-out 0.025s, border-color 0.05s ease-in-out 0.025s;
1995
1958
  overflow: hidden;
1959
+ }
1960
+ .us-checkbox--before .us-checkbox__control {
1961
+ order: 2;
1962
+ }
1963
+ .us-checkbox--befire .us-checkbox__label {
1964
+ order: 1;
1965
+ }
1966
+ .us-checkbox--checked .us-checkbox__control {
1967
+ border-color: var(--us-_checked-checkbox-control-border-color, var(--us-checkbox-control-border-color));
1968
+ color: var(--us-_checked-checkbox-control-color, var(--us-checkbox-control-color));
1969
+ }
1970
+ .us-checkbox--focus .us-checkbox__control {
1971
+ box-shadow: var(--us-_focus-checkbox-control-box-shadow);
1972
+ }
1973
+ .us-checkbox__tap {
1974
+ position: absolute;
1975
+ inset: 0px;
1976
+ opacity: 0;
1977
+ border-radius: inherit;
1978
+ background-color: var(--us-checkbox-tap-background);
1979
+ transform: scale(0);
1980
+ transition: opacity 0.05s ease-in-out 0.025s, transform 0.05s ease-in-out 0.025s;
1981
+ }
1982
+ .us-checkbox--checked .us-checkbox__tap {
1983
+ opacity: 1;
1984
+ transform: scale(1.5);
1985
+ }
1986
+ .us-checkbox .us-icon {
1987
+ opacity: 1;
1988
+ transform: scale(0);
1989
+ transition: opacity 0.05s ease-in-out 0.025s, transform 0.05s ease-in-out 0.025s;
1990
+ }
1991
+ .us-checkbox--checked .us-icon {
1992
+ opacity: 1;
1993
+ transform: scale(1);
1994
+ }
1995
+ .us-checkbox-group {
1996
1996
  display: flex;
1997
- justify-content: center;
1997
+ flex-wrap: wrap;
1998
+ gap: var(--us-checkbox-group-gap);
1999
+ }
2000
+ .us-checkbox-group--row {
2001
+ flex-direction: row;
1998
2002
  align-items: center;
1999
- transition: transform 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09);
2000
2003
  }
2001
- .us-nav-rail-item__icon {
2002
- padding-block: var(--us-nav-rail-item-icon-padding-y);
2003
- padding-inline: var(--us-nav-rail-item-icon-padding-x);
2004
- display: flex;
2004
+ .us-checkbox-group--col {
2005
+ flex-direction: column;
2006
+ }
2007
+ .us-checkbox-group--start {
2008
+ justify-content: flex-start;
2009
+ }
2010
+ .us-checkbox-group--center {
2005
2011
  justify-content: center;
2006
- align-items: center;
2007
2012
  }
2008
- .us-nav-rail-item__icon .us-icon {
2009
- font-size: var(--us-nav-rail-item-icon-font-size);
2013
+ .us-checkbox-group--end {
2014
+ justify-content: flex-end;
2010
2015
  }
2011
- .us-nav-rail-item__label {
2012
- position: absolute;
2013
- bottom: calc((var(--us-nav-rail-item-label-font-size) + var(--us-nav-rail-item-gap, 0)) * -1);
2014
- left: 50%;
2015
- transform: translateX(-50%);
2016
- font-size: var(--us-nav-rail-item-label-font-size);
2017
- font-weight: var(--us-nav-rail-item-label-font-weight);
2018
- line-height: var(--us-nav-rail-item-label-line-height);
2019
- width: 100%;
2020
- text-align: center;
2021
- overflow: hidden;
2022
- display: -webkit-box;
2023
- -webkit-box-orient: vertical;
2024
- -webkit-line-clamp: 1;
2025
- transition: opacity 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09);
2016
+ .us-checkbox-group--stretch .us-checkbox {
2017
+ flex-grow: 1;
2026
2018
  }
2027
- .us-nav-rail-item--selected {
2028
- color: var(--us-_active-nav-rail-item-color);
2019
+ .us-checkbox__label {
2020
+ font-size: var(--us-checkbox-label-font-size);
2021
+ color: var(--us-checkbox-label-color);
2022
+ }
2023
+
2024
+ .us-radio {
2025
+ cursor: pointer;
2026
+ display: inline-flex;
2027
+ align-items: center;
2028
+ gap: var(--us-radio-gap);
2029
+ -webkit-tap-highlight-color: transparent;
2029
2030
  }
2030
- .us-nav-rail-item--selected .us-nav-rail-item__media {
2031
- outline-color: var(--us-_active-nav-rail-item-media-border-color);
2031
+ .us-radio--disabled {
2032
+ opacity: 0.6;
2033
+ pointer-events: none;
2032
2034
  }
2033
- .us-nav-rail-item--selected .us-nav-rail-item__icon, .us-nav-rail-item:hover .us-nav-rail-item__icon {
2034
- transform: scale(1.15);
2035
+ .us-radio--read-only {
2036
+ pointer-events: none;
2035
2037
  }
2036
- .us-nav-rail-item--selected .us-nav-rail-item__indicator, .us-nav-rail-item--selected:hover .us-nav-rail-item__indicator {
2037
- color: var(--us-_active-nav-rail-item-indicator-color);
2038
+ .us-radio__control {
2039
+ position: relative;
2040
+ width: var(--us-radio-control-width);
2041
+ height: var(--us-radio-control-height);
2042
+ border-width: var(--us-radio-control-border-width);
2043
+ border-style: var(--us-radio-control-border-style);
2044
+ border-color: var(--us-radio-control-border-color);
2045
+ border-radius: var(--us-radio-control-border-radius);
2046
+ color: var(--us-radio-control-color);
2047
+ display: flex;
2048
+ justify-content: center;
2049
+ align-items: center;
2050
+ transition: color 0.05s ease-in-out 0.025s, border-color 0.05s ease-in-out 0.025s;
2051
+ overflow: hidden;
2038
2052
  }
2039
- .us-nav-rail-item--selected .us-nav-rail-item__indicator, .us-nav-rail-item:hover .us-nav-rail-item__indicator {
2040
- transform: translateX(0px);
2053
+ .us-radio--before .us-radio__control {
2054
+ order: 2;
2041
2055
  }
2042
- .us-nav-rail--left .us-nav-rail-item__indicator {
2043
- left: -25%;
2044
- border-radius: 0px var(--us-nav-rail-item-indicator-border-radius) var(--us-nav-rail-item-indicator-border-radius) 0px;
2056
+ .us-radio--befire .us-radio__label {
2057
+ order: 1;
2045
2058
  }
2046
- .us-nav-rail--right .us-nav-rail-item__indicator {
2047
- right: -25%;
2048
- border-radius: var(--us-nav-rail-item-indicator-border-radius) 0px 0px var(--us-nav-rail-item-indicator-border-radius);
2059
+ .us-radio--checked .us-radio__control {
2060
+ border-color: var(--us-_checked-radio-control-border-color, var(--us-radio-control-border-color));
2061
+ color: var(--us-_checked-radio-control-color, var(--us-radio-control-color));
2049
2062
  }
2050
- .us-nav-rail--left .us-nav-rail-item--selected .us-nav-rail-item__indicator, .us-nav-rail--left .us-nav-rail-item--selected:hover .us-nav-rail-item__indicator {
2051
- left: 0px;
2063
+ .us-radio--focus .us-radio__control {
2064
+ box-shadow: var(--us-_focus-radio-control-box-shadow);
2052
2065
  }
2053
- .us-nav-rail--right .us-nav-rail-item--selected .us-nav-rail-item__indicator, .us-nav-rail--right .us-nav-rail-item--selected:hover .us-nav-rail-item__indicator {
2054
- right: 0px;
2066
+ .us-radio__tap {
2067
+ position: absolute;
2068
+ inset: 0px;
2069
+ opacity: 0;
2070
+ border-radius: inherit;
2071
+ background-color: var(--us-radio-tap-background);
2072
+ transform: scale(0);
2073
+ transition: opacity 0.05s ease-in-out 0.025s, transform 0.05s ease-in-out 0.025s;
2055
2074
  }
2056
-
2057
- .us-steps {
2058
- flex-shrink: 0;
2059
- display: grid;
2060
- overflow: hidden;
2075
+ .us-radio--checked .us-radio__tap {
2076
+ opacity: 1;
2077
+ transform: scale(1.5);
2061
2078
  }
2062
- .us-steps--horizontal {
2063
- grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
2079
+ .us-radio .us-icon {
2080
+ opacity: 1;
2081
+ transform: scale(0);
2082
+ transition: opacity 0.05s ease-in-out 0.025s, transform 0.05s ease-in-out 0.025s;
2064
2083
  }
2065
- .us-steps--vertical {
2066
- grid-template-columns: 1;
2067
- gap: 2rem;
2084
+ .us-radio--checked .us-icon {
2085
+ opacity: 1;
2086
+ transform: scale(1);
2068
2087
  }
2069
- .us-steps--vertical .us-step {
2088
+ .us-radio-group {
2089
+ display: flex;
2090
+ flex-wrap: wrap;
2091
+ gap: var(--us-radio-group-gap);
2092
+ }
2093
+ .us-radio-group--row {
2070
2094
  flex-direction: row;
2071
- gap: 1.5rem;
2095
+ align-items: center;
2072
2096
  }
2073
- .us-steps--vertical .us-step__content {
2074
- padding: 4px 0px;
2097
+ .us-radio-group--col {
2098
+ flex-direction: column;
2075
2099
  }
2076
- .us-steps--vertical .us-step__title, .us-steps--vertical .us-step__subtitle {
2077
- margin: 0;
2078
- text-align: start;
2100
+ .us-radio-group--start {
2101
+ justify-content: flex-start;
2079
2102
  }
2080
- .us-steps--vertical .us-steps__indicator {
2081
- width: 1px;
2082
- height: 100%;
2083
- top: -50%;
2084
- bottom: 50%;
2085
- left: auto;
2086
- right: auto;
2103
+ .us-radio-group--center {
2104
+ justify-content: center;
2087
2105
  }
2088
-
2089
- .us-step {
2090
- position: relative;
2091
- display: flex;
2092
- flex-direction: column;
2093
- gap: 0.5rem;
2106
+ .us-radio-group--end {
2107
+ justify-content: flex-end;
2094
2108
  }
2095
- .us-step--completed {
2096
- --us-step-divider-color: var(--us-_completed-step-divider-color);
2109
+ .us-radio-group--stretch .us-radio {
2110
+ flex-grow: 1;
2097
2111
  }
2098
- .us-step--current {
2099
- --us-step-divider-color: var(--us-_current-step-divider-color);
2112
+ .us-radio input {
2113
+ position: absolute;
2114
+ width: 0;
2115
+ height: 0;
2116
+ opacity: 0;
2100
2117
  }
2101
- .us-step--disabled {
2102
- opacity: 0.65;
2103
- pointer-events: none;
2118
+ .us-radio__label {
2119
+ font-size: var(--us-radio-label-font-size);
2120
+ color: var(--us-radio-label-color);
2104
2121
  }
2105
- .us-step__header {
2106
- position: relative;
2107
- display: flex;
2108
- flex-direction: column;
2122
+
2123
+ .us-switch {
2124
+ --us-switch-control-padding: calc(var(--us-switch-thumb-width) * 0.25);
2125
+ cursor: pointer;
2126
+ display: inline-flex;
2109
2127
  align-items: center;
2110
- gap: 1rem;
2128
+ gap: var(--us-switch-gap);
2129
+ -webkit-tap-highlight-color: transparent;
2111
2130
  }
2112
- .us-step__avatar-wrapper {
2113
- border: 2px solid transparent;
2114
- padding: 2px;
2115
- border-radius: 50%;
2131
+ .us-switch input {
2132
+ position: absolute;
2133
+ opacity: 0;
2134
+ width: 0;
2135
+ height: 0;
2116
2136
  }
2117
- .us-step__avatar {
2137
+ .us-switch--disabled {
2138
+ opacity: 0.6;
2139
+ pointer-events: none;
2140
+ }
2141
+ .us-switch--read-only {
2142
+ pointer-events: none;
2143
+ }
2144
+ .us-switch__control {
2118
2145
  position: relative;
2119
- flex-shrink: 0;
2120
- width: 44px;
2121
- height: 44px;
2122
- border-radius: 50%;
2123
- font-size: var(--us-step-indicator-font-size);
2124
- font-weight: var(--us-step-indicator-font-weight);
2125
- color: var(--us-step-indicator-color);
2126
- background-color: var(--us-step-background-color);
2127
- display: flex;
2128
- justify-content: center;
2146
+ display: inline-block;
2147
+ width: var(--us-switch-control-width);
2148
+ height: var(--us-switch-control-height);
2149
+ border-radius: var(--us-switch-control-border-radius);
2150
+ cursor: pointer;
2151
+ background-color: var(--us-switch-control-color);
2152
+ display: inline-flex;
2129
2153
  align-items: center;
2130
- z-index: 1;
2131
- }
2132
- .us-step--current .us-step__avatar-wrapper {
2133
- border-color: var(--us-_current-step-border-color);
2154
+ transition: all 0.05s ease-in-out;
2155
+ user-select: none;
2156
+ -webkit-tap-highlight-color: transparent;
2134
2157
  }
2135
- .us-step__content {
2136
- display: flex;
2137
- flex-direction: column;
2138
- gap: 0.5rem;
2158
+ .us-switch--before .us-switch__control {
2159
+ order: 2;
2139
2160
  }
2140
- .us-step__title {
2141
- flex-shrink: 0;
2142
- max-width: 150px;
2143
- margin: 0 auto;
2144
- font-size: 0.875rem;
2145
- font-weight: 500;
2146
- text-align: center;
2147
- overflow: hidden;
2148
- display: -webkit-box;
2149
- -webkit-box-orient: vertical;
2150
- -webkit-line-clamp: 2;
2161
+ .us-switch--befire .us-switch__label {
2162
+ order: 1;
2151
2163
  }
2152
- .us-step__subtitle {
2153
- flex-shrink: 0;
2154
- max-width: 150px;
2155
- margin: 0 auto;
2156
- font-size: 0.75rem;
2157
- text-align: center;
2158
- overflow: hidden;
2159
- display: -webkit-box;
2160
- -webkit-box-orient: vertical;
2161
- -webkit-line-clamp: 2;
2162
- opacity: 0.75;
2164
+ .us-switch--checked .us-switch__control {
2165
+ background-color: var(--us-_checked-switch-control-color, var(--us-switch-control-color));
2163
2166
  }
2164
-
2165
- .us-steps {
2166
- position: relative;
2167
+ .us-switch--focus .us-switch__control {
2168
+ box-shadow: var(--us-_focus-switch-control-box-shadow);
2167
2169
  }
2168
- .us-steps__indicator {
2169
- position: absolute;
2170
- flex-grow: 1;
2171
- position: absolute;
2172
- right: 50%;
2173
- top: 50%;
2174
- left: -50%;
2175
- width: 100%;
2176
- height: 1px;
2177
- background-color: var(--us-step-divider-color);
2178
- z-index: -1;
2170
+ .us-switch__thumb {
2171
+ width: var(--us-switch-thumb-width);
2172
+ height: var(--us-switch-thumb-height);
2173
+ transform: translateX(var(--us-switch-control-padding));
2174
+ border-radius: var(--us-switch-thumb-border-radius);
2175
+ background-color: var(--us-switch-thumb-color);
2176
+ transition: all 0.05s ease-in-out;
2179
2177
  }
2180
- .us-steps__indicator--completed {
2181
- border-bottom-color: var(--us-_completed-step-divider-color);
2178
+ .us-switch--checked .us-switch__thumb {
2179
+ transform: translateX(calc(var(--us-switch-control-width) - var(--us-switch-thumb-width) - (var(--us-switch-control-padding))));
2182
2180
  }
2183
- .us-steps__indicator--current {
2184
- border-bottom-color: var(--us-_current-step-divider-color);
2181
+ .us-switch__label {
2182
+ font-size: var(--us-switch-label-font-size);
2183
+ color: var(--us-switch-label-color);
2185
2184
  }
2186
2185
 
2187
2186
  .us-animation-spin {
@@ -3717,7 +3716,6 @@
3717
3716
  overflow: hidden;
3718
3717
  color: var(--us-overlay-color);
3719
3718
  opacity: var(--us-overlay-opacity);
3720
- z-index: -1;
3721
3719
  pointer-events: none;
3722
3720
  background-color: currentColor;
3723
3721
  transition: var(--us-overlay-transition, background-color, opacity, 0.1s cubic-bezier(0.215, 0.61, 0.355, 1));
@@ -3786,35 +3784,100 @@
3786
3784
 
3787
3785
  .us-glow {
3788
3786
  position: absolute;
3789
- inset: 0px;
3787
+ inset: 0;
3790
3788
  border-radius: inherit;
3791
3789
  overflow: hidden;
3792
- outline-width: var(--us-glow-border-width);
3793
- outline-style: solid;
3794
- outline-color: var(--us-glow-border-color);
3795
- opacity: var(--us-glow-opacity);
3796
3790
  pointer-events: none;
3797
3791
  z-index: var(--us-glow-z-index);
3792
+ opacity: var(--us-glow-opacity);
3793
+ transition: var(--us-glow-transition, box-shadow, opacity, 0.1s cubic-bezier(0.215, 0.61, 0.355, 1));
3794
+ /* base color compuesto con alpha */
3795
+ color: var(--us-glow-color);
3796
+ color: rgb(var(--us-glow-color)/var(--us-glow-alpha));
3797
+ box-shadow: 0 0 var(--us-glow-blur) var(--us-glow-spread) currentColor;
3798
3798
  }
3799
3799
 
3800
+ /* Hover */
3800
3801
  :not([hidden]):hover > .us-glow {
3801
- outline-width: var(--us-glow-hover-border-width, var(--us-glow-border-width));
3802
- outline-color: var(--us-glow-hover-border-color, var(--us-glow-border-color));
3803
- opacity: var(--us-glow-hover-opacity, var(--us-glow-opacity));
3802
+ color: var(--us-_hover-glow-color, var(--us-glow-color));
3803
+ color: rgb(var(--us-_hover-glow-color, var(--us-glow-color))/var(--us-_hover-glow-alpha, var(--us-glow-alpha)));
3804
+ opacity: var(--us-_hover-glow-opacity, var(--us-glow-opacity));
3805
+ box-shadow: 0 0 var(--us-_hover-glow-blur, var(--us-glow-blur)) var(--us-_hover-glow-spread, var(--us-glow-spread)) currentColor;
3804
3806
  }
3805
3807
 
3808
+ /* Active */
3806
3809
  :not([hidden]):active > .us-glow {
3807
- outline-width: var(--us-glow-active-border-width, var(--us-glow-hover-border-width, var(--us-glow-border-width)));
3808
- outline-color: var(--us-glow-active-border-color, var(--us-glow-hover-border-color, var(--us-glow-border-color)));
3809
- opacity: var(--us-glow-active-opacity, var(--us-glow-hover-opacity, var(--us-glow-opacity)));
3810
+ color: var(--us-_active-glow-color, var(--us-_hover-glow-color, var(--us-glow-color)));
3811
+ color: rgb(var(--us-_active-glow-color, var(--us-_hover-glow-color, var(--us-glow-color)))/var(--us-_active-glow-alpha, var(--us-_hover-glow-alpha, var(--us-glow-alpha))));
3812
+ opacity: var(--us-_active-glow-opacity, var(--us-_hover-glow-opacity, var(--us-glow-opacity)));
3813
+ box-shadow: 0 0 var(--us-_active-glow-blur, var(--us-_hover-glow-blur, var(--us-glow-blur))) var(--us-_active-glow-spread, var(--us-_hover-glow-spread, var(--us-glow-spread))) currentColor;
3810
3814
  }
3811
3815
 
3816
+ /* Focus */
3812
3817
  [class*="--focus"] > .us-glow,
3813
- [class*="--focus"]:hover > .us-glow,
3814
3818
  :not([hidden]):focus > .us-glow {
3815
- outline-width: var(--us-glow-focus-border-width, var(--us-glow-hover-border-width, var(--us-glow-border-width)));
3816
- outline-color: var(--us-glow-focus-border-color, var(--us-glow-hover-border-color, var(--us-glow-border-color)));
3817
- opacity: var(--us-glow-focus-opacity, var(--us-glow-hover-opacity, var(--us-glow-opacity)));
3819
+ color: var(--us-_focus-glow-color, var(--us-glow-color));
3820
+ color: rgb(var(--us-_focus-glow-color, var(--us-glow-color))/var(--us-_focus-glow-alpha, var(--us-glow-alpha)));
3821
+ opacity: var(--us-_focus-glow-opacity, var(--us-glow-opacity));
3822
+ box-shadow: 0 0 var(--us-_focus-glow-blur, var(--us-glow-blur)) var(--us-_focus-glow-spread, var(--us-glow-spread)) currentColor;
3823
+ }
3824
+
3825
+ .us-ring {
3826
+ position: absolute;
3827
+ inset: 0;
3828
+ border-radius: inherit;
3829
+ overflow: hidden;
3830
+ color: var(--us-ring-color);
3831
+ opacity: var(--us-ring-opacity, 0);
3832
+ pointer-events: none;
3833
+ transition: var(--us-ring-transition, outline-color, opacity, 0.1s cubic-bezier(0.215, 0.61, 0.355, 1));
3834
+ outline-width: var(--us-ring-width, 2px);
3835
+ outline-style: solid;
3836
+ outline-color: currentColor;
3837
+ outline-offset: var(--us-ring-offset, 4px);
3838
+ }
3839
+
3840
+ /* Hover */
3841
+ :not([hidden]):hover > .us-ring {
3842
+ color: var(--us-_hover-ring-color, var(--us-ring-color));
3843
+ opacity: var(--us-_hover-ring-opacity, var(--us-ring-opacity));
3844
+ outline-width: var(--us-_hover-ring-width, var(--us-ring-width, 2px));
3845
+ outline-offset: var(--us-_hover-ring-offset, var(--us-ring-offset, 4px));
3846
+ }
3847
+
3848
+ /* Active */
3849
+ :not([hidden]):active > .us-ring {
3850
+ color: var(--us-_active-ring-color, var(--us-_hover-ring-color, var(--us-ring-color)));
3851
+ opacity: var(--us-_active-ring-opacity, var(--us-_hover-ring-opacity, var(--us-ring-opacity)));
3852
+ outline-width: var(--us-_active-ring-width, var(--us-_hover-ring-width, var(--us-ring-width, 2px)));
3853
+ outline-offset: var(--us-_active-ring-offset, var(--us-_hover-ring-offset, var(--us-ring-offset, 4px)));
3854
+ }
3855
+
3856
+ /* Focus */
3857
+ [class*="--focus"] > .us-ring,
3858
+ :not([hidden]):focus > .us-ring {
3859
+ color: var(--us-_focus-ring-color, var(--us-ring-color));
3860
+ opacity: var(--us-_focus-ring-opacity, var(--us-ring-opacity));
3861
+ outline-width: var(--us-_focus-ring-width, var(--us-ring-width, 2px));
3862
+ outline-offset: var(--us-_focus-ring-offset, var(--us-ring-offset, 4px));
3863
+ }
3864
+
3865
+ /* Focus + Hover */
3866
+ [class*="--focus"]:hover > .us-ring,
3867
+ :not([hidden]):focus:hover > .us-ring {
3868
+ color: var(--us-_focus-hover-ring-color, var(--us-_focus-ring-color, var(--us-ring-color)));
3869
+ opacity: var(--us-_focus-hover-ring-opacity, var(--us-_focus-ring-opacity, var(--us-ring-opacity)));
3870
+ outline-width: var(--us-_focus-hover-ring-width, var(--us-_focus-ring-width, var(--us-ring-width, 2px)));
3871
+ outline-offset: var(--us-_focus-hover-ring-offset, var(--us-_focus-ring-offset, var(--us-ring-offset, 4px)));
3872
+ }
3873
+
3874
+ /* Focus + Active */
3875
+ [class*="--focus"]:active > .us-ring,
3876
+ :not([hidden]):focus:active > .us-ring {
3877
+ color: var(--us-_focus-active-ring-color, var(--us-_focus-ring-color, var(--us-ring-color)));
3878
+ opacity: var(--us-_focus-active-ring-opacity, var(--us-_focus-ring-opacity, var(--us-ring-opacity)));
3879
+ outline-width: var(--us-_focus-active-ring-width, var(--us-_focus-ring-width, var(--us-ring-width, 2px)));
3880
+ outline-offset: var(--us-_focus-active-ring-offset, var(--us-_focus-ring-offset, var(--us-ring-offset, 4px)));
3818
3881
  }
3819
3882
 
3820
3883
  .us-surface {