@fundamental-styles/theming-preview 0.30.0-rc.8 → 0.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/button.html +149 -139
  2. package/calendar.html +450 -289
  3. package/form.html +26 -26
  4. package/fundamental-styles.css +4 -140
  5. package/header-footer.html +15 -15
  6. package/icon.html +5 -5
  7. package/input.html +141 -61
  8. package/object-header.html +3 -3
  9. package/package.json +2 -2
  10. package/panel.html +16 -13
  11. package/semantic-colors.html +24 -12
  12. package/shell-tile-card.html +281 -199
  13. package/table.html +16 -16
  14. package/text.html +30 -18
  15. package/toolbar.html +31 -31
package/header-footer.html CHANGED
@@ -28,17 +28,17 @@
28
28
  <div class="fd-bar fd-bar--header" style="position: absolute; top: 50px; left: 0; width: 100%;">
29
29
  <div class="fd-bar__left">
30
30
  <div class="fd-bar__element">
31
- <button aria-label="button" class="fd-button fd-button--transparent fd-button--compact">
31
+ <button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy">
32
32
  <i class="sap-icon--navigation-left-arrow"></i>
33
33
  </button>
34
34
  </div>
35
35
  <div class="fd-bar__element">
36
- <button aria-label="button" class="fd-button fd-button--transparent fd-button--compact">
36
+ <button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy">
37
37
  <i class="sap-icon--home"></i>
38
38
  </button>
39
39
  </div>
40
40
  <div class="fd-bar__element">
41
- <button aria-label="button" class="fd-button fd-button--transparent fd-button--compact">
41
+ <button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy">
42
42
  <i class="sap-icon--account"></i>
43
43
  </button>
44
44
  </div>
@@ -46,13 +46,13 @@
46
46
  <div class="fd-bar__middle">
47
47
  <div class="fd-bar__element">
48
48
  <div class="fd-segmented-button" role="group" aria-label="Group label">
49
- <button aria-label="button" class="fd-button fd-button--compact" aria-pressed="true">
49
+ <button aria-label="button" class="fd-button fd-button--cozy" aria-pressed="true">
50
50
  <i class="sap-icon--email"></i>
51
51
  </button>
52
- <button aria-label="button" class="fd-button fd-button--compact">
52
+ <button aria-label="button" class="fd-button fd-button--cozy" aria-pressed="true">
53
53
  <i class="sap-icon--iphone"></i>
54
54
  </button>
55
- <button aria-label="button" class="fd-button fd-button--compact">
55
+ <button aria-label="button" class="fd-button fd-button--cozy" aria-pressed="false">
56
56
  <i class="sap-icon--notification-2"></i>
57
57
  </button>
58
58
  </div>
@@ -67,7 +67,7 @@
67
67
  </div>
68
68
  </div>
69
69
  <div class="fd-bar__element">
70
- <button aria-label="button" class="fd-button fd-button--transparent fd-button--compact">
70
+ <button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy">
71
71
  <i class="sap-icon--grid"></i>
72
72
  </button>
73
73
  </div>
@@ -95,28 +95,28 @@
95
95
  <span>Text</span>
96
96
  </div>
97
97
  <div class="fd-bar__element">
98
- <button aria-label="button" class="fd-button fd-button--transparent fd-button--compact">Default</button>
98
+ <button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy">Default</button>
99
99
  </div>
100
100
  <div class="fd-bar__element">
101
- <button aria-label="button" class="fd-button fd-button--transparent fd-button--compact" disabled>Default</button>
101
+ <button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy" disabled>Default</button>
102
102
  </div>
103
103
  <div class="fd-bar__element">
104
- <button class="fd-button fd-button--emphasized fd-button--compact">Emphasized</button>
104
+ <button class="fd-button fd-button--emphasized fd-button--cozy">Emphasized</button>
105
105
  </div>
106
106
  <div class="fd-bar__element">
107
- <button class="fd-button fd-button--emphasized fd-button--compact" disabled>Emphasized</button>
107
+ <button class="fd-button fd-button--emphasized fd-button--cozy" disabled>Emphasized</button>
108
108
  </div>
109
109
  <div class="fd-bar__element">
110
- <button class="fd-button fd-button--positive fd-button--compact">Accept</button>
110
+ <button class="fd-button fd-button--positive fd-button--cozy">Accept</button>
111
111
  </div>
112
112
  <div class="fd-bar__element">
113
- <button class="fd-button fd-button--positive fd-button--compact" disabled>Accept</button>
113
+ <button class="fd-button fd-button--positive fd-button--cozy" disabled>Accept</button>
114
114
  </div>
115
115
  <div class="fd-bar__element">
116
- <button class="fd-button fd-button--negative fd-button--compact">Reject</button>
116
+ <button class="fd-button fd-button--negative fd-button--cozy">Reject</button>
117
117
  </div>
118
118
  <div class="fd-bar__element">
119
- <button class="fd-button fd-button--negative fd-button--compact" disabled>Reject</button>
119
+ <button class="fd-button fd-button--negative fd-button--cozy" disabled>Reject</button>
120
120
  </div>
121
121
  </div>
122
122
  </div>
package/icon.html CHANGED
@@ -74,15 +74,15 @@
74
74
  </button>
75
75
  &nbsp; &nbsp;
76
76
  <div class="fd-segmented-button" role="group" aria-label="Group label">
77
- <button aria-label="Survey" class="fd-button"><i class="sap-icon--survey"></i></button>
77
+ <button aria-label="Survey" class="fd-button" aria-pressed="false"><i class="sap-icon--survey"></i></button>
78
78
  <button aria-label="Chart" class="fd-button is-selected" aria-pressed="true"><i class="sap-icon--pie-chart"></i></button>
79
- <button aria-label="Pool" class="fd-button"><i class="sap-icon--pool"></i></button>
79
+ <button aria-label="Pool" class="fd-button" aria-pressed="false"><i class="sap-icon--pool"></i></button>
80
80
  </div>
81
81
  &nbsp; &nbsp;
82
82
  <div class="fd-segmented-button" role="group" aria-label="Group label">
83
- <button aria-label="Survey" class="fd-button" disabled><i class="sap-icon--survey"></i></button>
83
+ <button aria-label="Survey" class="fd-button" disabled aria-pressed="false"><i class="sap-icon--survey"></i></button>
84
84
  <button aria-label="Chart" class="fd-button is-selected" aria-pressed="true" disabled><i class="sap-icon--pie-chart"></i></button>
85
- <button aria-label="Pool" class="fd-button" disabled><i class="sap-icon--pool"></i></button>
85
+ <button aria-label="Pool" class="fd-button" disabled aria-pressed="false"><i class="sap-icon--pool"></i></button>
86
86
  </div>
87
87
  </div>
88
88
  </div>
@@ -132,7 +132,7 @@
132
132
  <span class="fd-rating-indicator__dynamic-text">(2 of 5)</span>
133
133
  </div>
134
134
  <br>
135
- <div class="fd-rating-indicator is-display-mode">
135
+ <div class="fd-rating-indicator fd-rating-indicator--display-mode">
136
136
  <div class="fd-rating-indicator__container" aria-label="Star Rating (out of 5)">
137
137
  <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-1" name="rating-display-mode" value="1" disabled>
138
138
  <label class="fd-rating-indicator__label" for="rating-display-mode-1"></label>
package/input.html CHANGED
@@ -56,7 +56,7 @@
56
56
  <div class="fd-panel__header">
57
57
  <h4 class="fd-panel__title">Multi-Input</h4>
58
58
  </div>
59
- <div class="fd-panel__content fd-theming__flex" style="height: 300px; overflow-x: hidden;">
59
+ <div class="fd-panel__content fd-theming__flex" style="overflow-x: hidden;">
60
60
  <!-- column 1 -->
61
61
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
62
62
  <div class="fd-popover" style="display:flex;flex-direction:column">
@@ -903,248 +903,328 @@
903
903
  <input type="checkbox" class="fd-checkbox" id="1">
904
904
  <label class="fd-checkbox__label" for="1">
905
905
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
906
- <span class="fd-checkbox__text">Enabled</span>
906
+ <div class="fd-checkbox__label-container">
907
+ <span class="fd-checkbox__text">Enabled</span>
908
+ </div>
907
909
  </label>
908
910
 
909
911
  <input type="checkbox" class="fd-checkbox is-information" id="2">
910
912
  <label class="fd-checkbox__label" for="2">
911
913
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
912
- <span class="fd-checkbox__text">Information</span>
914
+ <div class="fd-checkbox__label-container">
915
+ <span class="fd-checkbox__text">Information</span>
916
+ </div>
913
917
  </label>
914
918
 
915
919
  <input type="checkbox" class="fd-checkbox is-success" id="3">
916
920
  <label class="fd-checkbox__label" for="3">
917
921
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
918
- <span class="fd-checkbox__text">Success</span>
922
+ <div class="fd-checkbox__label-container">
923
+ <span class="fd-checkbox__text">Success</span>
924
+ </div>
919
925
  </label>
920
926
 
921
927
  <input type="checkbox" class="fd-checkbox is-warning" id="4">
922
928
  <label class="fd-checkbox__label" for="4">
923
929
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
924
- <span class="fd-checkbox__text">Warning</span>
930
+ <div class="fd-checkbox__label-container">
931
+ <span class="fd-checkbox__text">Warning</span>
932
+ </div>
925
933
  </label>
926
934
 
927
935
  <input type="checkbox" class="fd-checkbox is-error" id="5">
928
936
  <label class="fd-checkbox__label" for="5">
929
937
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
930
- <span class="fd-checkbox__text">Error</span>
938
+ <div class="fd-checkbox__label-container">
939
+ <span class="fd-checkbox__text">Error</span>
940
+ </div>
931
941
  </label>
932
942
  </div>
933
943
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
934
944
  <input type="checkbox" class="fd-checkbox" id="6" checked>
935
945
  <label class="fd-checkbox__label" for="6">
936
946
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
937
- <span class="fd-checkbox__text">Enabled</span>
947
+ <div class="fd-checkbox__label-container">
948
+ <span class="fd-checkbox__text">Enabled</span>
949
+ </div>
938
950
  </label>
939
951
 
940
952
  <input type="checkbox" class="fd-checkbox is-information" id="7" checked>
941
953
  <label class="fd-checkbox__label" for="7">
942
954
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
943
- <span class="fd-checkbox__text">Information</span>
955
+ <div class="fd-checkbox__label-container">
956
+ <span class="fd-checkbox__text">Information</span>
957
+ </div>
944
958
  </label>
945
959
 
946
960
  <input type="checkbox" class="fd-checkbox is-success" id="8" checked>
947
961
  <label class="fd-checkbox__label" for="8">
948
962
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
949
- <span class="fd-checkbox__text">Success</span>
963
+ <div class="fd-checkbox__label-container">
964
+ <span class="fd-checkbox__text">Success</span>
965
+ </div>
950
966
  </label>
951
967
 
952
968
  <input type="checkbox" class="fd-checkbox is-warning" id="9" checked>
953
969
  <label class="fd-checkbox__label" for="9">
954
970
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
955
- <span class="fd-checkbox__text">Warning</span>
971
+ <div class="fd-checkbox__label-container">
972
+ <span class="fd-checkbox__text">Warning</span>
973
+ </div>
956
974
  </label>
957
975
 
958
976
  <input type="checkbox" class="fd-checkbox is-error" id="10" checked>
959
977
  <label class="fd-checkbox__label" for="10">
960
978
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
961
- <span class="fd-checkbox__text">Error</span>
979
+ <div class="fd-checkbox__label-container">
980
+ <span class="fd-checkbox__text">Error</span>
981
+ </div>
962
982
  </label>
963
983
  </div>
964
984
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
965
985
  <input type="checkbox" class="fd-checkbox tristate" id="tristate1" checked>
966
986
  <label class="fd-checkbox__label" for="tristate1">
967
987
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
968
- <span class="fd-checkbox__text">Enabled</span>
988
+ <div class="fd-checkbox__label-container">
989
+ <span class="fd-checkbox__text">Enabled</span>
990
+ </div>
969
991
  </label>
970
992
 
971
993
  <input type="checkbox" class="fd-checkbox is-information tristate" id="tristate2" checked>
972
994
  <label class="fd-checkbox__label" for="tristate2">
973
995
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
974
- <span class="fd-checkbox__text">Information</span>
996
+ <div class="fd-checkbox__label-container">
997
+ <span class="fd-checkbox__text">Information</span>
998
+ </div>
975
999
  </label>
976
1000
 
977
1001
  <input type="checkbox" class="fd-checkbox is-success tristate" id="tristate3" checked>
978
1002
  <label class="fd-checkbox__label" for="tristate3">
979
1003
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
980
- <span class="fd-checkbox__text">Success</span>
1004
+ <div class="fd-checkbox__label-container">
1005
+ <span class="fd-checkbox__text">Success</span>
1006
+ </div>
981
1007
  </label>
982
1008
 
983
1009
  <input type="checkbox" class="fd-checkbox is-warning tristate" id="tristate4" checked>
984
1010
  <label class="fd-checkbox__label" for="tristate4">
985
1011
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
986
- <span class="fd-checkbox__text">Warning</span>
1012
+ <div class="fd-checkbox__label-container">
1013
+ <span class="fd-checkbox__text">Warning</span>
1014
+ </div>
987
1015
  </label>
988
1016
 
989
1017
  <input type="checkbox" class="fd-checkbox is-error tristate" id="tristate5" checked>
990
1018
  <label class="fd-checkbox__label" for="tristate5">
991
1019
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
992
- <span class="fd-checkbox__text">Error</span>
1020
+ <div class="fd-checkbox__label-container">
1021
+ <span class="fd-checkbox__text">Error</span>
1022
+ </div>
993
1023
  </label>
994
1024
  </div>
995
1025
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
996
1026
  <input type="checkbox" class="fd-checkbox" id="16" disabled>
997
1027
  <label class="fd-checkbox__label" for="16">
998
1028
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
999
- <span class="fd-checkbox__text">Disabled</span>
1029
+ <div class="fd-checkbox__label-container">
1030
+ <span class="fd-checkbox__text">Disabled</span>
1031
+ </div>
1000
1032
  </label>
1001
1033
 
1002
1034
  <input type="checkbox" class="fd-checkbox is-information" id="17" disabled>
1003
1035
  <label class="fd-checkbox__label" for="17">
1004
1036
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1005
- <span class="fd-checkbox__text">Information</span>
1037
+ <div class="fd-checkbox__label-container">
1038
+ <span class="fd-checkbox__text">Information</span>
1039
+ </div>
1006
1040
  </label>
1007
1041
 
1008
1042
  <input type="checkbox" class="fd-checkbox is-success" id="18" disabled>
1009
1043
  <label class="fd-checkbox__label" for="18">
1010
1044
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1011
- <span class="fd-checkbox__text">Success</span>
1045
+ <div class="fd-checkbox__label-container">
1046
+ <span class="fd-checkbox__text">Success</span>
1047
+ </div>
1012
1048
  </label>
1013
1049
 
1014
1050
  <input type="checkbox" class="fd-checkbox is-warning" id="19" disabled>
1015
1051
  <label class="fd-checkbox__label" for="19">
1016
1052
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1017
- <span class="fd-checkbox__text">Warning</span>
1053
+ <div class="fd-checkbox__label-container">
1054
+ <span class="fd-checkbox__text">Warning</span>
1055
+ </div>
1018
1056
  </label>
1019
1057
 
1020
1058
  <input type="checkbox" class="fd-checkbox is-error" id="20" disabled>
1021
1059
  <label class="fd-checkbox__label" for="20">
1022
1060
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1023
- <span class="fd-checkbox__text">Error</span>
1061
+ <div class="fd-checkbox__label-container">
1062
+ <span class="fd-checkbox__text">Error</span>
1063
+ </div>
1024
1064
  </label>
1025
1065
  </div>
1026
1066
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
1027
1067
  <input type="checkbox" class="fd-checkbox" id="21" checked disabled>
1028
1068
  <label class="fd-checkbox__label" for="16">
1029
1069
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1030
- <span class="fd-checkbox__text">Disabled</span>
1070
+ <div class="fd-checkbox__label-container">
1071
+ <span class="fd-checkbox__text">Disabled</span>
1072
+ </div>
1031
1073
  </label>
1032
1074
 
1033
1075
  <input type="checkbox" class="fd-checkbox is-information" id="22" checked disabled>
1034
1076
  <label class="fd-checkbox__label" for="17">
1035
1077
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1036
- <span class="fd-checkbox__text">Information</span>
1078
+ <div class="fd-checkbox__label-container">
1079
+ <span class="fd-checkbox__text">Information</span>
1080
+ </div>
1037
1081
  </label>
1038
1082
 
1039
1083
  <input type="checkbox" class="fd-checkbox is-success" id="23" checked disabled>
1040
1084
  <label class="fd-checkbox__label" for="18">
1041
1085
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1042
- <span class="fd-checkbox__text">Success</span>
1086
+ <div class="fd-checkbox__label-container">
1087
+ <span class="fd-checkbox__text">Success</span>
1088
+ </div>
1043
1089
  </label>
1044
1090
 
1045
1091
  <input type="checkbox" class="fd-checkbox is-warning" id="24" checked disabled>
1046
1092
  <label class="fd-checkbox__label" for="19">
1047
1093
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1048
- <span class="fd-checkbox__text">Warning</span>
1094
+ <div class="fd-checkbox__label-container">
1095
+ <span class="fd-checkbox__text">Warning</span>
1096
+ </div>
1049
1097
  </label>
1050
1098
 
1051
1099
  <input type="checkbox" class="fd-checkbox is-error" id="25" checked disabled>
1052
1100
  <label class="fd-checkbox__label" for="20">
1053
1101
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1054
- <span class="fd-checkbox__text">Error</span>
1102
+ <div class="fd-checkbox__label-container">
1103
+ <span class="fd-checkbox__text">Error</span>
1104
+ </div>
1055
1105
  </label>
1056
1106
  </div>
1057
1107
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
1058
1108
  <input type="checkbox" class="fd-checkbox tristate" id="tristate6" checked disabled>
1059
1109
  <label class="fd-checkbox__label" for="tristate6">
1060
1110
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1061
- <span class="fd-checkbox__text">Disabled</span>
1111
+ <div class="fd-checkbox__label-container">
1112
+ <span class="fd-checkbox__text">Disabled</span>
1113
+ </div>
1062
1114
  </label>
1063
1115
 
1064
1116
  <input type="checkbox" class="fd-checkbox is-information tristate" id="tristate7" checked disabled>
1065
1117
  <label class="fd-checkbox__label" for="tristate7">
1066
1118
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1067
- <span class="fd-checkbox__text">Information</span>
1119
+ <div class="fd-checkbox__label-container">
1120
+ <span class="fd-checkbox__text">Information</span>
1121
+ </div>
1068
1122
  </label>
1069
1123
 
1070
1124
  <input type="checkbox" class="fd-checkbox is-success tristate" id="tristate8" checked disabled>
1071
1125
  <label class="fd-checkbox__label" for="tristate8">
1072
1126
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1073
- <span class="fd-checkbox__text">Success</span>
1127
+ <div class="fd-checkbox__label-container">
1128
+ <span class="fd-checkbox__text">Success</span>
1129
+ </div>
1074
1130
  </label>
1075
1131
 
1076
1132
  <input type="checkbox" class="fd-checkbox is-warning tristate" id="tristate9" checked disabled>
1077
1133
  <label class="fd-checkbox__label" for="tristate9">
1078
1134
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1079
- <span class="fd-checkbox__text">Warning</span>
1135
+ <div class="fd-checkbox__label-container">
1136
+ <span class="fd-checkbox__text">Warning</span>
1137
+ </div>
1080
1138
  </label>
1081
1139
 
1082
1140
  <input type="checkbox" class="fd-checkbox is-error tristate" id="tristate10" checked disabled>
1083
1141
  <label class="fd-checkbox__label" for="tristate10">
1084
1142
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1085
- <span class="fd-checkbox__text">Error</span>
1143
+ <div class="fd-checkbox__label-container">
1144
+ <span class="fd-checkbox__text">Error</span>
1145
+ </div>
1086
1146
  </label>
1087
1147
  </div>
1088
1148
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
1089
1149
  <input type="checkbox" class="fd-checkbox" id="31" readonly>
1090
1150
  <label class="fd-checkbox__label" for="16">
1091
1151
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1092
- <span class="fd-checkbox__text">Read-Only</span>
1152
+ <div class="fd-checkbox__label-container">
1153
+ <span class="fd-checkbox__text">Read-Only</span>
1154
+ </div>
1093
1155
  </label>
1094
1156
 
1095
1157
  <input type="checkbox" class="fd-checkbox is-information" id="32" readonly>
1096
1158
  <label class="fd-checkbox__label" for="17">
1097
1159
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1098
- <span class="fd-checkbox__text">Information</span>
1160
+ <div class="fd-checkbox__label-container">
1161
+ <span class="fd-checkbox__text">Information</span>
1162
+ </div>
1099
1163
  </label>
1100
1164
 
1101
1165
  <input type="checkbox" class="fd-checkbox is-success" id="33" readonly>
1102
1166
  <label class="fd-checkbox__label" for="18">
1103
1167
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1104
- <span class="fd-checkbox__text">Success</span>
1168
+ <div class="fd-checkbox__label-container">
1169
+ <span class="fd-checkbox__text">Success</span>
1170
+ </div>
1105
1171
  </label>
1106
1172
 
1107
1173
  <input type="checkbox" class="fd-checkbox is-warning" id="34" readonly>
1108
1174
  <label class="fd-checkbox__label" for="19">
1109
1175
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1110
- <span class="fd-checkbox__text">Warning</span>
1176
+ <div class="fd-checkbox__label-container">
1177
+ <span class="fd-checkbox__text">Warning</span>
1178
+ </div>
1111
1179
  </label>
1112
1180
 
1113
1181
  <input type="checkbox" class="fd-checkbox is-error" id="35" readonly>
1114
1182
  <label class="fd-checkbox__label" for="20">
1115
1183
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1116
- <span class="fd-checkbox__text">Error</span>
1184
+ <div class="fd-checkbox__label-container">
1185
+ <span class="fd-checkbox__text">Error</span>
1186
+ </div>
1117
1187
  </label>
1118
1188
  </div>
1119
1189
  <div class="fd-theming__flex fd-theming__flex-column">
1120
1190
  <input type="checkbox" class="fd-checkbox" id="31" readonly checked>
1121
1191
  <label class="fd-checkbox__label" for="16">
1122
1192
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1123
- <span class="fd-checkbox__text">Read-Only</span>
1193
+ <div class="fd-checkbox__label-container">
1194
+ <span class="fd-checkbox__text">Read-Only</span>
1195
+ </div>
1124
1196
  </label>
1125
1197
 
1126
1198
  <input type="checkbox" class="fd-checkbox is-information" id="32" readonly checked>
1127
1199
  <label class="fd-checkbox__label" for="17">
1128
1200
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1129
- <span class="fd-checkbox__text">Information</span>
1201
+ <div class="fd-checkbox__label-container">
1202
+ <span class="fd-checkbox__text">Information</span>
1203
+ </div>
1130
1204
  </label>
1131
1205
 
1132
1206
  <input type="checkbox" class="fd-checkbox is-success" id="33" readonly checked>
1133
1207
  <label class="fd-checkbox__label" for="18">
1134
1208
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1135
- <span class="fd-checkbox__text">Success</span>
1209
+ <div class="fd-checkbox__label-container">
1210
+ <span class="fd-checkbox__text">Success</span>
1211
+ </div>
1136
1212
  </label>
1137
1213
 
1138
1214
  <input type="checkbox" class="fd-checkbox is-warning" id="34" readonly checked>
1139
1215
  <label class="fd-checkbox__label" for="19">
1140
1216
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1141
- <span class="fd-checkbox__text">Warning</span>
1217
+ <div class="fd-checkbox__label-container">
1218
+ <span class="fd-checkbox__text">Warning</span>
1219
+ </div>
1142
1220
  </label>
1143
1221
 
1144
1222
  <input type="checkbox" class="fd-checkbox is-error" id="35" readonly checked>
1145
1223
  <label class="fd-checkbox__label" for="20">
1146
1224
  <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
1147
- <span class="fd-checkbox__text">Error</span>
1225
+ <div class="fd-checkbox__label-container">
1226
+ <span class="fd-checkbox__text">Error</span>
1227
+ </div>
1148
1228
  </label>
1149
1229
  </div>
1150
1230
  </div>
@@ -1158,89 +1238,89 @@
1158
1238
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
1159
1239
  <input type="radio" class="fd-radio" id="iSpDidh761" name="radio5">
1160
1240
  <label class="fd-radio__label" for="iSpDidh761">
1161
- Enabled
1241
+ <span class="fd-radio__text">Enabled</span>
1162
1242
  </label>
1163
1243
  <input type="radio" class="fd-radio is-success" id="iSpDidh7612" name="radio5">
1164
1244
  <label class="fd-radio__label" for="iSpDidh7612">
1165
- Success
1245
+ <span class="fd-radio__text">Success</span>
1166
1246
  </label>
1167
1247
  <input type="radio" class="fd-radio is-error" id="iSpDidh7613" name="radio5">
1168
1248
  <label class="fd-radio__label" for="iSpDidh7613">
1169
- Error
1249
+ <span class="fd-radio__text">Error</span>
1170
1250
  </label>
1171
1251
  <input type="radio" class="fd-radio is-warning" id="iSpDidh7614" name="radio5">
1172
1252
  <label class="fd-radio__label" for="iSpDidh7614">
1173
- Warning
1253
+ <span class="fd-radio__text">Warning</span>
1174
1254
  </label>
1175
1255
  <input type="radio" class="fd-radio is-information" id="iSpDidh7615" name="radio5">
1176
1256
  <label class="fd-radio__label" for="iSpDidh7615">
1177
- Information
1257
+ <span class="fd-radio__text">Information</span>
1178
1258
  </label>
1179
1259
  </div>
1180
1260
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
1181
1261
  <input type="radio" class="fd-radio" id="checked1" name="checked1" checked>
1182
1262
  <label class="fd-radio__label" for="checked1">
1183
- Enabled
1263
+ <span class="fd-radio__text">Enabled</span>
1184
1264
  </label>
1185
1265
  <input type="radio" class="fd-radio is-success" id="checked2" name="checked2" checked>
1186
1266
  <label class="fd-radio__label" for="checked2">
1187
- Success
1267
+ <span class="fd-radio__text">Success</span>
1188
1268
  </label>
1189
1269
  <input type="radio" class="fd-radio is-error" id="checked3" name="checked3" checked>
1190
1270
  <label class="fd-radio__label" for="checked3">
1191
- Error
1271
+ <span class="fd-radio__text">Error</span>
1192
1272
  </label>
1193
1273
  <input type="radio" class="fd-radio is-warning" id="checked4" name="checked4" checked>
1194
1274
  <label class="fd-radio__label" for="checked4">
1195
- Warning
1275
+ <span class="fd-radio__text">Warning</span>
1196
1276
  </label>
1197
1277
  <input type="radio" class="fd-radio is-information" id="checked5" name="checked5" checked>
1198
1278
  <label class="fd-radio__label" for="checked5">
1199
- Information
1279
+ <span class="fd-radio__text">Information</span>
1200
1280
  </label>
1201
1281
  </div>
1202
1282
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
1203
1283
  <input type="radio" class="fd-radio" id="iSpDidh761" name="radio5" disabled>
1204
1284
  <label class="fd-radio__label" for="iSpDidh761">
1205
- Disabled
1285
+ <span class="fd-radio__text">Disabled</span>
1206
1286
  </label>
1207
1287
  <input type="radio" class="fd-radio is-success" id="iSpDidh7612" name="radio5" disabled>
1208
1288
  <label class="fd-radio__label" for="iSpDidh7612">
1209
- Success
1289
+ <span class="fd-radio__text">Success</span>
1210
1290
  </label>
1211
1291
  <input type="radio" class="fd-radio is-error" id="iSpDidh7613" name="radio5" disabled>
1212
1292
  <label class="fd-radio__label" for="iSpDidh7613">
1213
- Error
1293
+ <span class="fd-radio__text">Error</span>
1214
1294
  </label>
1215
1295
  <input type="radio" class="fd-radio is-warning" id="iSpDidh7614" name="radio5" disabled>
1216
1296
  <label class="fd-radio__label" for="iSpDidh7614">
1217
- Warning
1297
+ <span class="fd-radio__text">Warning</span>
1218
1298
  </label>
1219
1299
  <input type="radio" class="fd-radio is-information" id="iSpDidh7615" name="radio5" disabled>
1220
1300
  <label class="fd-radio__label" for="iSpDidh7615">
1221
- Information
1301
+ <span class="fd-radio__text">Information</span>
1222
1302
  </label>
1223
1303
  </div>
1224
1304
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
1225
1305
  <input type="radio" class="fd-radio" id="41" name="41" checked disabled>
1226
1306
  <label class="fd-radio__label" for="41">
1227
- Disabled
1307
+ <span class="fd-radio__text">Disabled</span>
1228
1308
  </label>
1229
1309
  <input type="radio" class="fd-radio is-success" id="42" name="42" checked disabled>
1230
1310
  <label class="fd-radio__label" for="42">
1231
- Success
1311
+ <span class="fd-radio__text">Success</span>
1232
1312
  </label>
1233
1313
  <input type="radio" class="fd-radio is-error" id="43" name="43" checked disabled>
1234
1314
  <label class="fd-radio__label" for="43">
1235
- Error
1315
+ <span class="fd-radio__text">Error</span>
1236
1316
  </label>
1237
1317
  <input type="radio" class="fd-radio is-warning" id="44" name="44" checked disabled>
1238
1318
  <label class="fd-radio__label" for="44">
1239
- Warning
1319
+ <span class="fd-radio__text">Warning</span>
1240
1320
  </label>
1241
1321
  <input type="radio" class="fd-radio is-information" id="45" name="45" checked disabled>
1242
1322
  <label class="fd-radio__label" for="45">
1243
- Information
1323
+ <span class="fd-radio__text">Information</span>
1244
1324
  </label>
1245
1325
  </div>
1246
1326
  </div>