@momentum-design/components 0.22.6 → 0.22.7

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.
@@ -2,250 +2,6 @@
2
2
  "schemaVersion": "1.0.0",
3
3
  "readme": "",
4
4
  "modules": [
5
- {
6
- "kind": "javascript-module",
7
- "path": "components/avatar/avatar.component.js",
8
- "declarations": [
9
- {
10
- "kind": "class",
11
- "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
12
- "name": "Avatar",
13
- "cssProperties": [
14
- {
15
- "description": "Allows customization of the default background color.",
16
- "name": "--mdc-avatar-default-background-color"
17
- },
18
- {
19
- "description": "Allows customization of the default foreground color.",
20
- "name": "--mdc-avatar-default-foreground-color"
21
- },
22
- {
23
- "description": "Allows customization of the loading indicator background color.",
24
- "name": "--mdc-avatar-loading-indicator-background-color"
25
- },
26
- {
27
- "description": "Allows customization of the loading indicator foreground color.",
28
- "name": "--mdc-avatar-loading-indicator-foreground-color"
29
- },
30
- {
31
- "description": "Allows customization of the loading overlay background color.",
32
- "name": "--mdc-avatar-loading-overlay-background-color"
33
- }
34
- ],
35
- "members": [
36
- {
37
- "kind": "field",
38
- "name": "src",
39
- "type": {
40
- "text": "string | undefined"
41
- },
42
- "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
43
- "attribute": "src",
44
- "inheritedFrom": {
45
- "name": "AvatarComponentMixin",
46
- "module": "utils/mixins/AvatarComponentMixin.js"
47
- }
48
- },
49
- {
50
- "kind": "field",
51
- "name": "initials",
52
- "type": {
53
- "text": "string | undefined"
54
- },
55
- "description": "The initials to be displayed for the avatar.",
56
- "attribute": "initials",
57
- "inheritedFrom": {
58
- "name": "AvatarComponentMixin",
59
- "module": "utils/mixins/AvatarComponentMixin.js"
60
- }
61
- },
62
- {
63
- "kind": "field",
64
- "name": "presence",
65
- "type": {
66
- "text": "PresenceType | undefined"
67
- },
68
- "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
69
- "attribute": "presence",
70
- "inheritedFrom": {
71
- "name": "AvatarComponentMixin",
72
- "module": "utils/mixins/AvatarComponentMixin.js"
73
- }
74
- },
75
- {
76
- "kind": "field",
77
- "name": "size",
78
- "type": {
79
- "text": "AvatarSize"
80
- },
81
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
82
- "default": "32",
83
- "attribute": "size",
84
- "reflects": true,
85
- "inheritedFrom": {
86
- "name": "AvatarComponentMixin",
87
- "module": "utils/mixins/AvatarComponentMixin.js"
88
- }
89
- },
90
- {
91
- "kind": "field",
92
- "name": "counter",
93
- "type": {
94
- "text": "number | undefined"
95
- },
96
- "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
97
- "attribute": "counter",
98
- "inheritedFrom": {
99
- "name": "AvatarComponentMixin",
100
- "module": "utils/mixins/AvatarComponentMixin.js"
101
- }
102
- },
103
- {
104
- "kind": "field",
105
- "name": "isTyping",
106
- "type": {
107
- "text": "boolean"
108
- },
109
- "default": "false",
110
- "description": "Represents the typing indicator when the user is typing.",
111
- "attribute": "is-typing",
112
- "inheritedFrom": {
113
- "name": "AvatarComponentMixin",
114
- "module": "utils/mixins/AvatarComponentMixin.js"
115
- }
116
- },
117
- {
118
- "kind": "field",
119
- "name": "iconName",
120
- "type": {
121
- "text": "IconNames | undefined"
122
- },
123
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
124
- "attribute": "icon-name",
125
- "inheritedFrom": {
126
- "name": "IconNameMixin",
127
- "module": "utils/mixins/IconNameMixin.js"
128
- }
129
- }
130
- ],
131
- "mixins": [
132
- {
133
- "name": "AvatarComponentMixin",
134
- "module": "/src/utils/mixins/AvatarComponentMixin"
135
- },
136
- {
137
- "name": "IconNameMixin",
138
- "module": "/src/utils/mixins/IconNameMixin"
139
- }
140
- ],
141
- "superclass": {
142
- "name": "Component",
143
- "module": "/src/models"
144
- },
145
- "tagName": "mdc-avatar",
146
- "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n */",
147
- "customElement": true,
148
- "attributes": [
149
- {
150
- "name": "src",
151
- "type": {
152
- "text": "string | undefined"
153
- },
154
- "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
155
- "fieldName": "src",
156
- "inheritedFrom": {
157
- "name": "AvatarComponentMixin",
158
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
159
- }
160
- },
161
- {
162
- "name": "initials",
163
- "type": {
164
- "text": "string | undefined"
165
- },
166
- "description": "The initials to be displayed for the avatar.",
167
- "fieldName": "initials",
168
- "inheritedFrom": {
169
- "name": "AvatarComponentMixin",
170
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
171
- }
172
- },
173
- {
174
- "name": "presence",
175
- "type": {
176
- "text": "PresenceType | undefined"
177
- },
178
- "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
179
- "fieldName": "presence",
180
- "inheritedFrom": {
181
- "name": "AvatarComponentMixin",
182
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
183
- }
184
- },
185
- {
186
- "name": "size",
187
- "type": {
188
- "text": "AvatarSize"
189
- },
190
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
191
- "default": "32",
192
- "fieldName": "size",
193
- "inheritedFrom": {
194
- "name": "AvatarComponentMixin",
195
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
196
- }
197
- },
198
- {
199
- "name": "counter",
200
- "type": {
201
- "text": "number | undefined"
202
- },
203
- "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
204
- "fieldName": "counter",
205
- "inheritedFrom": {
206
- "name": "AvatarComponentMixin",
207
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
208
- }
209
- },
210
- {
211
- "name": "is-typing",
212
- "type": {
213
- "text": "boolean"
214
- },
215
- "default": "false",
216
- "description": "Represents the typing indicator when the user is typing.",
217
- "fieldName": "isTyping",
218
- "inheritedFrom": {
219
- "name": "AvatarComponentMixin",
220
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
221
- }
222
- },
223
- {
224
- "name": "icon-name",
225
- "type": {
226
- "text": "IconNames | undefined"
227
- },
228
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
229
- "fieldName": "iconName",
230
- "inheritedFrom": {
231
- "name": "IconNameMixin",
232
- "module": "src/utils/mixins/IconNameMixin.ts"
233
- }
234
- }
235
- ]
236
- }
237
- ],
238
- "exports": [
239
- {
240
- "kind": "js",
241
- "name": "default",
242
- "declaration": {
243
- "name": "Avatar",
244
- "module": "components/avatar/avatar.component.js"
245
- }
246
- }
247
- ]
248
- },
249
5
  {
250
6
  "kind": "javascript-module",
251
7
  "path": "components/avatarbutton/avatarbutton.component.js",
@@ -1121,20 +877,264 @@
1121
877
  },
1122
878
  {
1123
879
  "kind": "javascript-module",
1124
- "path": "components/bullet/bullet.component.js",
880
+ "path": "components/avatar/avatar.component.js",
1125
881
  "declarations": [
1126
882
  {
1127
883
  "kind": "class",
1128
- "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
1129
- "name": "Bullet",
884
+ "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
885
+ "name": "Avatar",
1130
886
  "cssProperties": [
1131
887
  {
1132
- "description": "background color of the bullet",
1133
- "name": "--mdc-bullet-background-color"
888
+ "description": "Allows customization of the default background color.",
889
+ "name": "--mdc-avatar-default-background-color"
1134
890
  },
1135
891
  {
1136
- "description": "small size value of the bullet",
1137
- "name": "--mdc-bullet-size-small"
892
+ "description": "Allows customization of the default foreground color.",
893
+ "name": "--mdc-avatar-default-foreground-color"
894
+ },
895
+ {
896
+ "description": "Allows customization of the loading indicator background color.",
897
+ "name": "--mdc-avatar-loading-indicator-background-color"
898
+ },
899
+ {
900
+ "description": "Allows customization of the loading indicator foreground color.",
901
+ "name": "--mdc-avatar-loading-indicator-foreground-color"
902
+ },
903
+ {
904
+ "description": "Allows customization of the loading overlay background color.",
905
+ "name": "--mdc-avatar-loading-overlay-background-color"
906
+ }
907
+ ],
908
+ "members": [
909
+ {
910
+ "kind": "field",
911
+ "name": "src",
912
+ "type": {
913
+ "text": "string | undefined"
914
+ },
915
+ "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
916
+ "attribute": "src",
917
+ "inheritedFrom": {
918
+ "name": "AvatarComponentMixin",
919
+ "module": "utils/mixins/AvatarComponentMixin.js"
920
+ }
921
+ },
922
+ {
923
+ "kind": "field",
924
+ "name": "initials",
925
+ "type": {
926
+ "text": "string | undefined"
927
+ },
928
+ "description": "The initials to be displayed for the avatar.",
929
+ "attribute": "initials",
930
+ "inheritedFrom": {
931
+ "name": "AvatarComponentMixin",
932
+ "module": "utils/mixins/AvatarComponentMixin.js"
933
+ }
934
+ },
935
+ {
936
+ "kind": "field",
937
+ "name": "presence",
938
+ "type": {
939
+ "text": "PresenceType | undefined"
940
+ },
941
+ "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
942
+ "attribute": "presence",
943
+ "inheritedFrom": {
944
+ "name": "AvatarComponentMixin",
945
+ "module": "utils/mixins/AvatarComponentMixin.js"
946
+ }
947
+ },
948
+ {
949
+ "kind": "field",
950
+ "name": "size",
951
+ "type": {
952
+ "text": "AvatarSize"
953
+ },
954
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
955
+ "default": "32",
956
+ "attribute": "size",
957
+ "reflects": true,
958
+ "inheritedFrom": {
959
+ "name": "AvatarComponentMixin",
960
+ "module": "utils/mixins/AvatarComponentMixin.js"
961
+ }
962
+ },
963
+ {
964
+ "kind": "field",
965
+ "name": "counter",
966
+ "type": {
967
+ "text": "number | undefined"
968
+ },
969
+ "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
970
+ "attribute": "counter",
971
+ "inheritedFrom": {
972
+ "name": "AvatarComponentMixin",
973
+ "module": "utils/mixins/AvatarComponentMixin.js"
974
+ }
975
+ },
976
+ {
977
+ "kind": "field",
978
+ "name": "isTyping",
979
+ "type": {
980
+ "text": "boolean"
981
+ },
982
+ "default": "false",
983
+ "description": "Represents the typing indicator when the user is typing.",
984
+ "attribute": "is-typing",
985
+ "inheritedFrom": {
986
+ "name": "AvatarComponentMixin",
987
+ "module": "utils/mixins/AvatarComponentMixin.js"
988
+ }
989
+ },
990
+ {
991
+ "kind": "field",
992
+ "name": "iconName",
993
+ "type": {
994
+ "text": "IconNames | undefined"
995
+ },
996
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
997
+ "attribute": "icon-name",
998
+ "inheritedFrom": {
999
+ "name": "IconNameMixin",
1000
+ "module": "utils/mixins/IconNameMixin.js"
1001
+ }
1002
+ }
1003
+ ],
1004
+ "mixins": [
1005
+ {
1006
+ "name": "AvatarComponentMixin",
1007
+ "module": "/src/utils/mixins/AvatarComponentMixin"
1008
+ },
1009
+ {
1010
+ "name": "IconNameMixin",
1011
+ "module": "/src/utils/mixins/IconNameMixin"
1012
+ }
1013
+ ],
1014
+ "superclass": {
1015
+ "name": "Component",
1016
+ "module": "/src/models"
1017
+ },
1018
+ "tagName": "mdc-avatar",
1019
+ "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n */",
1020
+ "customElement": true,
1021
+ "attributes": [
1022
+ {
1023
+ "name": "src",
1024
+ "type": {
1025
+ "text": "string | undefined"
1026
+ },
1027
+ "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
1028
+ "fieldName": "src",
1029
+ "inheritedFrom": {
1030
+ "name": "AvatarComponentMixin",
1031
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1032
+ }
1033
+ },
1034
+ {
1035
+ "name": "initials",
1036
+ "type": {
1037
+ "text": "string | undefined"
1038
+ },
1039
+ "description": "The initials to be displayed for the avatar.",
1040
+ "fieldName": "initials",
1041
+ "inheritedFrom": {
1042
+ "name": "AvatarComponentMixin",
1043
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1044
+ }
1045
+ },
1046
+ {
1047
+ "name": "presence",
1048
+ "type": {
1049
+ "text": "PresenceType | undefined"
1050
+ },
1051
+ "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
1052
+ "fieldName": "presence",
1053
+ "inheritedFrom": {
1054
+ "name": "AvatarComponentMixin",
1055
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1056
+ }
1057
+ },
1058
+ {
1059
+ "name": "size",
1060
+ "type": {
1061
+ "text": "AvatarSize"
1062
+ },
1063
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
1064
+ "default": "32",
1065
+ "fieldName": "size",
1066
+ "inheritedFrom": {
1067
+ "name": "AvatarComponentMixin",
1068
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1069
+ }
1070
+ },
1071
+ {
1072
+ "name": "counter",
1073
+ "type": {
1074
+ "text": "number | undefined"
1075
+ },
1076
+ "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
1077
+ "fieldName": "counter",
1078
+ "inheritedFrom": {
1079
+ "name": "AvatarComponentMixin",
1080
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1081
+ }
1082
+ },
1083
+ {
1084
+ "name": "is-typing",
1085
+ "type": {
1086
+ "text": "boolean"
1087
+ },
1088
+ "default": "false",
1089
+ "description": "Represents the typing indicator when the user is typing.",
1090
+ "fieldName": "isTyping",
1091
+ "inheritedFrom": {
1092
+ "name": "AvatarComponentMixin",
1093
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1094
+ }
1095
+ },
1096
+ {
1097
+ "name": "icon-name",
1098
+ "type": {
1099
+ "text": "IconNames | undefined"
1100
+ },
1101
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
1102
+ "fieldName": "iconName",
1103
+ "inheritedFrom": {
1104
+ "name": "IconNameMixin",
1105
+ "module": "src/utils/mixins/IconNameMixin.ts"
1106
+ }
1107
+ }
1108
+ ]
1109
+ }
1110
+ ],
1111
+ "exports": [
1112
+ {
1113
+ "kind": "js",
1114
+ "name": "default",
1115
+ "declaration": {
1116
+ "name": "Avatar",
1117
+ "module": "components/avatar/avatar.component.js"
1118
+ }
1119
+ }
1120
+ ]
1121
+ },
1122
+ {
1123
+ "kind": "javascript-module",
1124
+ "path": "components/bullet/bullet.component.js",
1125
+ "declarations": [
1126
+ {
1127
+ "kind": "class",
1128
+ "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
1129
+ "name": "Bullet",
1130
+ "cssProperties": [
1131
+ {
1132
+ "description": "background color of the bullet",
1133
+ "name": "--mdc-bullet-background-color"
1134
+ },
1135
+ {
1136
+ "description": "small size value of the bullet",
1137
+ "name": "--mdc-bullet-size-small"
1138
1138
  },
1139
1139
  {
1140
1140
  "description": "medium size value of the bullet",
@@ -1192,207 +1192,174 @@
1192
1192
  },
1193
1193
  {
1194
1194
  "kind": "javascript-module",
1195
- "path": "components/checkbox/checkbox.component.js",
1195
+ "path": "components/button/button.component.js",
1196
1196
  "declarations": [
1197
1197
  {
1198
1198
  "kind": "class",
1199
- "description": "Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selections in lists.\n\nA checkbox component contains an optional label and an optional helper text.",
1200
- "name": "Checkbox",
1201
- "cssProperties": [
1202
- {
1203
- "description": "Allows customization of the background color on hover.",
1204
- "name": "--mdc-checkbox-background-color-hover"
1205
- },
1206
- {
1207
- "description": "Border color in high contrast.",
1208
- "name": "--mdc-checkbox-border-color"
1209
- },
1210
- {
1211
- "description": "Background color for a selected checkbox.",
1212
- "name": "--mdc-checkbox-checked-background-color"
1213
- },
1214
- {
1215
- "description": "Background color for a selected checkbox when hovered.",
1216
- "name": "--mdc-checkbox-checked-background-color-hover"
1217
- },
1218
- {
1219
- "description": "Background color for a selected checkbox when pressed.",
1220
- "name": "--mdc-checkbox-checked-pressed-icon-color"
1221
- },
1222
- {
1223
- "description": "Background color for a disabled checkbox.",
1224
- "name": "--mdc-checkbox-disabled-background-color"
1225
- },
1226
- {
1227
- "description": "Border color for a disabled checkbox.",
1228
- "name": "--mdc-checkbox-disabled-border-color"
1229
- },
1230
- {
1231
- "description": "Background color for a disabled, selected checkbox.",
1232
- "name": "--mdc-checkbox-disabled-checked-icon-color"
1233
- },
1199
+ "description": "`mdc-button` is a component that can be configured in various ways to suit different use cases.\n\nButton Variants:\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n\nButton Colors:\n- **Positive**: Green color.\n- **Negative**: Red color.\n- **Accent**: Blue color.\n- **Promotional**: Purple color.\n- **Default**: White color.\n\nButton Sizes (in REM units):\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- **Tertiary icon button**: 20.\n\nButton Types:\n- **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n- **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n- **Icon button**: A button represented by just an icon without any text.\nThe type of button is inferred based on the presence of slot and/or prefix and postfix icons.",
1200
+ "name": "Button",
1201
+ "slots": [
1234
1202
  {
1235
- "description": "Icon color for a disabled checkbox.",
1236
- "name": "--mdc-checkbox-disabled-icon-color"
1237
- },
1203
+ "description": "Text label of the button.",
1204
+ "name": ""
1205
+ }
1206
+ ],
1207
+ "members": [
1238
1208
  {
1239
- "description": "Background color for an unselected checkbox.",
1240
- "name": "--mdc-checkbox-icon-background-color"
1209
+ "kind": "field",
1210
+ "name": "prefixIcon",
1211
+ "type": {
1212
+ "text": "string | undefined"
1213
+ },
1214
+ "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
1215
+ "attribute": "prefix-icon",
1216
+ "reflects": true
1241
1217
  },
1242
1218
  {
1243
- "description": "Default background color for an unselected checkbox.",
1244
- "name": "--mdc-checkbox-icon-border-color"
1219
+ "kind": "field",
1220
+ "name": "postfixIcon",
1221
+ "type": {
1222
+ "text": "string | undefined"
1223
+ },
1224
+ "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
1225
+ "attribute": "postfix-icon",
1226
+ "reflects": true
1245
1227
  },
1246
1228
  {
1247
- "description": "Icon color for an unselected checkbox.",
1248
- "name": "--mdc-checkbox-icon-color"
1229
+ "kind": "field",
1230
+ "name": "variant",
1231
+ "type": {
1232
+ "text": "ButtonVariant"
1233
+ },
1234
+ "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
1235
+ "default": "primary",
1236
+ "attribute": "variant"
1249
1237
  },
1250
- {
1251
- "description": "Background color for a selected checkbox when pressed.",
1252
- "name": "--mdc-checkbox-pressed-icon-color"
1253
- }
1254
- ],
1255
- "members": [
1256
1238
  {
1257
1239
  "kind": "field",
1258
- "name": "checked",
1240
+ "name": "size",
1259
1241
  "type": {
1260
- "text": "boolean"
1242
+ "text": "ButtonSize"
1261
1243
  },
1262
- "default": "false",
1263
- "description": "Determines whether the checkbox is selected or unselected.",
1264
- "attribute": "checked",
1265
- "reflects": true
1244
+ "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
1245
+ "default": "32",
1246
+ "attribute": "size",
1247
+ "reflects": true,
1248
+ "inheritedFrom": {
1249
+ "name": "Buttonsimple",
1250
+ "module": "components/buttonsimple/buttonsimple.component.js"
1251
+ }
1266
1252
  },
1267
1253
  {
1268
1254
  "kind": "field",
1269
- "name": "indeterminate",
1255
+ "name": "color",
1270
1256
  "type": {
1271
- "text": "boolean"
1257
+ "text": "ButtonColor"
1272
1258
  },
1273
- "default": "false",
1274
- "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
1275
- "attribute": "indeterminate",
1276
- "reflects": true
1259
+ "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
1260
+ "default": "default",
1261
+ "attribute": "color"
1277
1262
  },
1278
1263
  {
1279
- "kind": "method",
1280
- "name": "setFormValue",
1281
- "privacy": "private",
1282
- "description": "Updates the form value to reflect the current state of the checkbox.\nIf checked, the value is set to either the user-provided value or 'on' if no value is provided.\nIf unchecked, the value is set to null."
1264
+ "kind": "field",
1265
+ "name": "role",
1266
+ "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
1267
+ "default": "'button'",
1268
+ "attribute": "role",
1269
+ "reflects": true,
1270
+ "type": {
1271
+ "text": "string"
1272
+ },
1273
+ "inheritedFrom": {
1274
+ "name": "Buttonsimple",
1275
+ "module": "components/buttonsimple/buttonsimple.component.js"
1276
+ }
1283
1277
  },
1284
1278
  {
1285
1279
  "kind": "method",
1286
- "name": "toggleState",
1280
+ "name": "modifyIconName",
1287
1281
  "privacy": "private",
1288
- "return": {
1289
- "type": {
1290
- "text": "void"
1282
+ "parameters": [
1283
+ {
1284
+ "name": "active",
1285
+ "type": {
1286
+ "text": "boolean"
1287
+ },
1288
+ "description": "The active state."
1291
1289
  }
1292
- },
1293
- "description": "Toggles the state of the checkbox element.\nIf the element is not disabled, then\nthe checked property is toggled and the indeterminate property is set to false."
1290
+ ],
1291
+ "description": "Modifies the icon name based on the active state.\nIf the button is active, the icon name is suffixed with '-filled'.\nIf the button is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
1294
1292
  },
1295
1293
  {
1296
1294
  "kind": "method",
1297
- "name": "handleChange",
1298
- "privacy": "public",
1299
- "return": {
1300
- "type": {
1301
- "text": "void"
1302
- }
1303
- },
1295
+ "name": "setVariant",
1296
+ "privacy": "private",
1304
1297
  "parameters": [
1305
1298
  {
1306
- "name": "event",
1299
+ "name": "variant",
1307
1300
  "type": {
1308
- "text": "Event"
1309
- }
1301
+ "text": "ButtonVariant"
1302
+ },
1303
+ "description": "The variant to set."
1310
1304
  }
1311
1305
  ],
1312
- "description": "Toggles the state of the checkbox element.\nand dispatch the new change event."
1306
+ "description": "Sets the variant attribute for the button component.\nIf the provided variant is not included in the BUTTON_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT."
1313
1307
  },
1314
1308
  {
1315
1309
  "kind": "method",
1316
- "name": "handleKeyDown",
1310
+ "name": "setSize",
1317
1311
  "privacy": "private",
1318
- "return": {
1319
- "type": {
1320
- "text": "void"
1321
- }
1322
- },
1323
1312
  "parameters": [
1324
1313
  {
1325
- "name": "event",
1314
+ "name": "size",
1326
1315
  "type": {
1327
- "text": "KeyboardEvent"
1316
+ "text": "PillButtonSize | IconButtonSize"
1328
1317
  },
1329
- "description": "The keyboard event."
1318
+ "description": "The size to set."
1330
1319
  }
1331
1320
  ],
1332
- "description": "Handles the keydown event on the checkbox.\nWhen the user presses Enter, the form is submitted."
1333
- },
1334
- {
1335
- "kind": "field",
1336
- "name": "internals"
1337
- },
1338
- {
1339
- "kind": "field",
1340
- "name": "helpTextType",
1341
- "type": {
1342
- "text": "ValidationType"
1343
- },
1344
- "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
1345
- "attribute": "help-text-type",
1346
- "reflects": true,
1347
- "default": "undefined as unknown",
1348
- "inheritedFrom": {
1349
- "name": "FormfieldWrapper",
1350
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
1351
- }
1352
- },
1353
- {
1354
- "kind": "field",
1355
- "name": "name",
1356
- "type": {
1357
- "text": "string"
1358
- },
1359
- "default": "''",
1360
- "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
1361
- "attribute": "name",
1362
- "reflects": true,
1363
- "inheritedFrom": {
1364
- "name": "NameMixin",
1365
- "module": "utils/mixins/NameMixin.js"
1366
- }
1321
+ "description": "Sets the size attribute for the button component.\nValidates the size based on the button type (icon, pill, or tertiary).\nDefaults to DEFAULTS.SIZE if invalid."
1367
1322
  },
1368
1323
  {
1369
- "kind": "field",
1370
- "name": "value",
1371
- "type": {
1372
- "text": "string"
1373
- },
1374
- "default": "''",
1375
- "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
1376
- "attribute": "value",
1377
- "reflects": true,
1378
- "inheritedFrom": {
1379
- "name": "ValueMixin",
1380
- "module": "utils/mixins/ValueMixin.js"
1381
- }
1324
+ "kind": "method",
1325
+ "name": "setColor",
1326
+ "privacy": "private",
1327
+ "parameters": [
1328
+ {
1329
+ "name": "color",
1330
+ "type": {
1331
+ "text": "ButtonColor"
1332
+ },
1333
+ "description": "The color to set."
1334
+ }
1335
+ ],
1336
+ "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary buttons."
1337
+ },
1338
+ {
1339
+ "kind": "method",
1340
+ "name": "inferButtonType",
1341
+ "privacy": "private",
1342
+ "description": "Infers the type of button based on the presence of slot and/or prefix and postfix icons.",
1343
+ "parameters": [
1344
+ {
1345
+ "description": "default slot of button",
1346
+ "name": "slot"
1347
+ }
1348
+ ]
1382
1349
  },
1383
1350
  {
1384
1351
  "kind": "field",
1385
- "name": "dataAriaLabel",
1352
+ "name": "tabIndex",
1386
1353
  "type": {
1387
- "text": "string | null"
1354
+ "text": "number"
1388
1355
  },
1389
- "default": "null",
1390
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
1391
- "attribute": "data-aria-label",
1356
+ "default": "0",
1357
+ "description": "This property specifies the tab order of the element.",
1358
+ "attribute": "tabIndex",
1392
1359
  "reflects": true,
1393
1360
  "inheritedFrom": {
1394
- "name": "DataAriaLabelMixin",
1395
- "module": "utils/mixins/DataAriaLabelMixin.js"
1361
+ "name": "TabIndexMixin",
1362
+ "module": "utils/mixins/TabIndexMixin.js"
1396
1363
  }
1397
1364
  },
1398
1365
  {
@@ -1412,182 +1379,255 @@
1412
1379
  },
1413
1380
  {
1414
1381
  "kind": "field",
1415
- "name": "label",
1382
+ "name": "active",
1416
1383
  "type": {
1417
- "text": "string | undefined"
1384
+ "text": "boolean"
1418
1385
  },
1419
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
1420
- "attribute": "label",
1386
+ "default": "false",
1387
+ "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
1388
+ "attribute": "active",
1421
1389
  "reflects": true,
1422
1390
  "inheritedFrom": {
1423
- "name": "FormfieldWrapper",
1424
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
1391
+ "name": "Buttonsimple",
1392
+ "module": "components/buttonsimple/buttonsimple.component.js"
1425
1393
  }
1426
1394
  },
1427
1395
  {
1428
1396
  "kind": "field",
1429
- "name": "id",
1430
- "default": "`mdc-input-${uuidv4()}`",
1431
- "description": "The unique id of the input field. It is used to link the input field with the label.",
1432
- "attribute": "id",
1397
+ "name": "softDisabled",
1398
+ "type": {
1399
+ "text": "boolean"
1400
+ },
1401
+ "default": "false",
1402
+ "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
1403
+ "attribute": "soft-disabled",
1433
1404
  "inheritedFrom": {
1434
- "name": "FormfieldWrapper",
1435
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
1405
+ "name": "Buttonsimple",
1406
+ "module": "components/buttonsimple/buttonsimple.component.js"
1436
1407
  }
1437
1408
  },
1438
1409
  {
1439
1410
  "kind": "field",
1440
- "name": "helpText",
1411
+ "name": "type",
1441
1412
  "type": {
1442
- "text": "string | undefined"
1413
+ "text": "ButtonType"
1443
1414
  },
1444
- "description": "The help text that is displayed below the input field.",
1445
- "attribute": "help-text",
1415
+ "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
1416
+ "default": "button",
1417
+ "attribute": "type",
1446
1418
  "reflects": true,
1447
1419
  "inheritedFrom": {
1448
- "name": "FormfieldWrapper",
1449
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
1420
+ "name": "Buttonsimple",
1421
+ "module": "components/buttonsimple/buttonsimple.component.js"
1450
1422
  }
1451
1423
  },
1452
1424
  {
1453
1425
  "kind": "method",
1454
- "name": "renderLabelElement",
1426
+ "name": "executeAction",
1455
1427
  "privacy": "protected",
1456
- "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
1457
- "return": {
1458
- "type": {
1459
- "text": ""
1460
- }
1461
- },
1462
1428
  "inheritedFrom": {
1463
- "name": "FormfieldWrapper",
1464
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
1429
+ "name": "Buttonsimple",
1430
+ "module": "components/buttonsimple/buttonsimple.component.js"
1465
1431
  }
1466
1432
  },
1467
1433
  {
1468
1434
  "kind": "method",
1469
- "name": "renderHelpTextIcon",
1435
+ "name": "setActive",
1470
1436
  "privacy": "protected",
1471
- "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
1472
- "return": {
1473
- "type": {
1474
- "text": ""
1437
+ "parameters": [
1438
+ {
1439
+ "name": "element",
1440
+ "type": {
1441
+ "text": "HTMLElement"
1442
+ },
1443
+ "description": "The button element"
1444
+ },
1445
+ {
1446
+ "name": "active",
1447
+ "type": {
1448
+ "text": "boolean"
1449
+ },
1450
+ "description": "The active state of the element"
1475
1451
  }
1476
- },
1452
+ ],
1453
+ "description": "Sets the aria-pressed attribute based on the active state of the button.",
1477
1454
  "inheritedFrom": {
1478
- "name": "FormfieldWrapper",
1479
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
1455
+ "name": "Buttonsimple",
1456
+ "module": "components/buttonsimple/buttonsimple.component.js"
1480
1457
  }
1481
1458
  },
1482
1459
  {
1483
1460
  "kind": "method",
1484
- "name": "renderHelpText",
1485
- "privacy": "protected",
1486
- "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
1487
- "return": {
1488
- "type": {
1489
- "text": ""
1461
+ "name": "setSoftDisabled",
1462
+ "privacy": "private",
1463
+ "parameters": [
1464
+ {
1465
+ "name": "element",
1466
+ "type": {
1467
+ "text": "HTMLElement"
1468
+ },
1469
+ "description": "The button element."
1470
+ },
1471
+ {
1472
+ "name": "softDisabled",
1473
+ "type": {
1474
+ "text": "boolean"
1475
+ },
1476
+ "description": "The soft-disabled state."
1490
1477
  }
1491
- },
1478
+ ],
1479
+ "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
1492
1480
  "inheritedFrom": {
1493
- "name": "FormfieldWrapper",
1494
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
1481
+ "name": "Buttonsimple",
1482
+ "module": "components/buttonsimple/buttonsimple.component.js"
1495
1483
  }
1496
1484
  },
1497
1485
  {
1498
1486
  "kind": "method",
1499
- "name": "renderLabel",
1500
- "privacy": "protected",
1501
- "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
1502
- "return": {
1503
- "type": {
1504
- "text": ""
1487
+ "name": "setDisabled",
1488
+ "privacy": "private",
1489
+ "parameters": [
1490
+ {
1491
+ "name": "element",
1492
+ "type": {
1493
+ "text": "HTMLElement"
1494
+ },
1495
+ "description": "The button element."
1496
+ },
1497
+ {
1498
+ "name": "disabled",
1499
+ "type": {
1500
+ "text": "boolean"
1501
+ },
1502
+ "description": "The disabled state."
1505
1503
  }
1506
- },
1504
+ ],
1505
+ "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
1507
1506
  "inheritedFrom": {
1508
- "name": "FormfieldWrapper",
1509
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
1507
+ "name": "Buttonsimple",
1508
+ "module": "components/buttonsimple/buttonsimple.component.js"
1510
1509
  }
1511
1510
  },
1512
1511
  {
1513
1512
  "kind": "method",
1514
- "name": "renderHelperText",
1515
- "privacy": "protected",
1516
- "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
1517
- "return": {
1518
- "type": {
1519
- "text": ""
1513
+ "name": "triggerClickEvent",
1514
+ "privacy": "private",
1515
+ "inheritedFrom": {
1516
+ "name": "Buttonsimple",
1517
+ "module": "components/buttonsimple/buttonsimple.component.js"
1518
+ }
1519
+ },
1520
+ {
1521
+ "kind": "method",
1522
+ "name": "handleKeyDown",
1523
+ "privacy": "private",
1524
+ "parameters": [
1525
+ {
1526
+ "name": "event",
1527
+ "type": {
1528
+ "text": "KeyboardEvent"
1529
+ },
1530
+ "description": "The keyboard event."
1520
1531
  }
1521
- },
1532
+ ],
1533
+ "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.",
1522
1534
  "inheritedFrom": {
1523
- "name": "FormfieldWrapper",
1524
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
1535
+ "name": "Buttonsimple",
1536
+ "module": "components/buttonsimple/buttonsimple.component.js"
1525
1537
  }
1526
- }
1527
- ],
1528
- "events": [
1538
+ },
1529
1539
  {
1530
- "type": {
1531
- "text": "EventConstructor"
1540
+ "kind": "method",
1541
+ "name": "handleKeyUp",
1542
+ "privacy": "private",
1543
+ "parameters": [
1544
+ {
1545
+ "name": "event",
1546
+ "type": {
1547
+ "text": "KeyboardEvent"
1548
+ },
1549
+ "description": "The keyboard event."
1550
+ }
1551
+ ],
1552
+ "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
1553
+ "inheritedFrom": {
1554
+ "name": "Buttonsimple",
1555
+ "module": "components/buttonsimple/buttonsimple.component.js"
1532
1556
  }
1533
1557
  }
1534
1558
  ],
1535
1559
  "attributes": [
1536
1560
  {
1537
- "name": "checked",
1561
+ "name": "prefix-icon",
1538
1562
  "type": {
1539
- "text": "boolean"
1563
+ "text": "string | undefined"
1564
+ },
1565
+ "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
1566
+ "fieldName": "prefixIcon"
1567
+ },
1568
+ {
1569
+ "name": "postfix-icon",
1570
+ "type": {
1571
+ "text": "string | undefined"
1540
1572
  },
1541
- "default": "false",
1542
- "description": "Determines whether the checkbox is selected or unselected.",
1543
- "fieldName": "checked"
1573
+ "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
1574
+ "fieldName": "postfixIcon"
1544
1575
  },
1545
1576
  {
1546
- "name": "indeterminate",
1577
+ "name": "variant",
1547
1578
  "type": {
1548
- "text": "boolean"
1579
+ "text": "ButtonVariant"
1549
1580
  },
1550
- "default": "false",
1551
- "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
1552
- "fieldName": "indeterminate"
1581
+ "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
1582
+ "default": "primary",
1583
+ "fieldName": "variant"
1553
1584
  },
1554
1585
  {
1555
- "name": "name",
1586
+ "name": "size",
1556
1587
  "type": {
1557
- "text": "string"
1588
+ "text": "ButtonSize"
1558
1589
  },
1559
- "default": "''",
1560
- "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
1561
- "fieldName": "name",
1590
+ "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
1591
+ "default": "32",
1592
+ "fieldName": "size",
1562
1593
  "inheritedFrom": {
1563
- "name": "NameMixin",
1564
- "module": "src/utils/mixins/NameMixin.ts"
1594
+ "name": "Buttonsimple",
1595
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1565
1596
  }
1566
1597
  },
1567
1598
  {
1568
- "name": "value",
1599
+ "name": "color",
1600
+ "type": {
1601
+ "text": "ButtonColor"
1602
+ },
1603
+ "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
1604
+ "default": "default",
1605
+ "fieldName": "color"
1606
+ },
1607
+ {
1608
+ "name": "role",
1609
+ "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
1610
+ "default": "'button'",
1611
+ "fieldName": "role",
1569
1612
  "type": {
1570
1613
  "text": "string"
1571
1614
  },
1572
- "default": "''",
1573
- "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
1574
- "fieldName": "value",
1575
1615
  "inheritedFrom": {
1576
- "name": "ValueMixin",
1577
- "module": "src/utils/mixins/ValueMixin.ts"
1616
+ "name": "Buttonsimple",
1617
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1578
1618
  }
1579
1619
  },
1580
1620
  {
1581
- "name": "data-aria-label",
1621
+ "name": "tabIndex",
1582
1622
  "type": {
1583
- "text": "string | null"
1623
+ "text": "number"
1584
1624
  },
1585
- "default": "null",
1586
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
1587
- "fieldName": "dataAriaLabel",
1625
+ "default": "0",
1626
+ "description": "This property specifies the tab order of the element.",
1627
+ "fieldName": "tabIndex",
1588
1628
  "inheritedFrom": {
1589
- "name": "DataAriaLabelMixin",
1590
- "module": "src/utils/mixins/DataAriaLabelMixin.ts"
1629
+ "name": "TabIndexMixin",
1630
+ "module": "src/utils/mixins/TabIndexMixin.ts"
1591
1631
  }
1592
1632
  },
1593
1633
  {
@@ -1604,83 +1644,52 @@
1604
1644
  }
1605
1645
  },
1606
1646
  {
1607
- "name": "label",
1647
+ "name": "active",
1608
1648
  "type": {
1609
- "text": "string | undefined"
1649
+ "text": "boolean"
1610
1650
  },
1611
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
1612
- "fieldName": "label",
1613
- "inheritedFrom": {
1614
- "name": "FormfieldWrapper",
1615
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
1616
- }
1617
- },
1618
- {
1619
- "name": "id",
1620
- "default": "`mdc-input-${uuidv4()}`",
1621
- "description": "The unique id of the input field. It is used to link the input field with the label.",
1622
- "fieldName": "id",
1651
+ "default": "false",
1652
+ "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
1653
+ "fieldName": "active",
1623
1654
  "inheritedFrom": {
1624
- "name": "FormfieldWrapper",
1625
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
1655
+ "name": "Buttonsimple",
1656
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1626
1657
  }
1627
1658
  },
1628
1659
  {
1629
- "name": "help-text-type",
1660
+ "name": "soft-disabled",
1630
1661
  "type": {
1631
- "text": "ValidationType"
1662
+ "text": "boolean"
1632
1663
  },
1633
- "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
1634
- "fieldName": "helpTextType",
1664
+ "default": "false",
1665
+ "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
1666
+ "fieldName": "softDisabled",
1635
1667
  "inheritedFrom": {
1636
- "name": "FormfieldWrapper",
1637
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
1668
+ "name": "Buttonsimple",
1669
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1638
1670
  }
1639
1671
  },
1640
1672
  {
1641
- "name": "help-text",
1673
+ "name": "type",
1642
1674
  "type": {
1643
- "text": "string | undefined"
1675
+ "text": "ButtonType"
1644
1676
  },
1645
- "description": "The help text that is displayed below the input field.",
1646
- "fieldName": "helpText",
1677
+ "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
1678
+ "default": "button",
1679
+ "fieldName": "type",
1647
1680
  "inheritedFrom": {
1648
- "name": "FormfieldWrapper",
1649
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
1681
+ "name": "Buttonsimple",
1682
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1650
1683
  }
1651
1684
  }
1652
1685
  ],
1653
- "mixins": [
1654
- {
1655
- "name": "NameMixin",
1656
- "module": "/src/utils/mixins/NameMixin"
1657
- },
1658
- {
1659
- "name": "ValueMixin",
1660
- "module": "/src/utils/mixins/ValueMixin"
1661
- },
1662
- {
1663
- "name": "DataAriaLabelMixin",
1664
- "module": "/src/utils/mixins/DataAriaLabelMixin"
1665
- }
1666
- ],
1667
1686
  "superclass": {
1668
- "name": "FormfieldWrapper",
1669
- "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
1687
+ "name": "Buttonsimple",
1688
+ "module": "/src/components/buttonsimple/buttonsimple.component"
1670
1689
  },
1671
- "tagName": "mdc-checkbox",
1672
- "jsDoc": "/**\n * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selections in lists.\n *\n * A checkbox component contains an optional label and an optional helper text.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-checkbox\n *\n * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.\n * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n */",
1673
- "customElement": true,
1674
- "slots": [
1675
- {
1676
- "description": "slot to add the label info icon",
1677
- "name": "label-info",
1678
- "inheritedFrom": {
1679
- "name": "FormfieldWrapper",
1680
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
1681
- }
1682
- }
1683
- ]
1690
+ "tagName": "mdc-button",
1691
+ "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * Button Variants:\n * - **Primary**: Solid background color.\n * - **Secondary**: Transparent background with a solid border.\n * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n *\n * Button Colors:\n * - **Positive**: Green color.\n * - **Negative**: Red color.\n * - **Accent**: Blue color.\n * - **Promotional**: Purple color.\n * - **Default**: White color.\n *\n * Button Sizes (in REM units):\n * - **Pill button**: 40, 32, 28, 24.\n * - **Icon button**: 64, 52, 40, 32, 28, 24.\n * - **Tertiary icon button**: 20.\n *\n * Button Types:\n * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n * - **Icon button**: A button represented by just an icon without any text.\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n */",
1692
+ "customElement": true
1684
1693
  }
1685
1694
  ],
1686
1695
  "exports": [
@@ -1688,8 +1697,8 @@
1688
1697
  "kind": "js",
1689
1698
  "name": "default",
1690
1699
  "declaration": {
1691
- "name": "Checkbox",
1692
- "module": "components/checkbox/checkbox.component.js"
1700
+ "name": "Button",
1701
+ "module": "components/button/button.component.js"
1693
1702
  }
1694
1703
  }
1695
1704
  ]
@@ -1993,442 +2002,402 @@
1993
2002
  },
1994
2003
  {
1995
2004
  "kind": "javascript-module",
1996
- "path": "components/button/button.component.js",
2005
+ "path": "components/checkbox/checkbox.component.js",
1997
2006
  "declarations": [
1998
2007
  {
1999
2008
  "kind": "class",
2000
- "description": "`mdc-button` is a component that can be configured in various ways to suit different use cases.\n\nButton Variants:\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n\nButton Colors:\n- **Positive**: Green color.\n- **Negative**: Red color.\n- **Accent**: Blue color.\n- **Promotional**: Purple color.\n- **Default**: White color.\n\nButton Sizes (in REM units):\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- **Tertiary icon button**: 20.\n\nButton Types:\n- **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n- **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n- **Icon button**: A button represented by just an icon without any text.\nThe type of button is inferred based on the presence of slot and/or prefix and postfix icons.",
2001
- "name": "Button",
2002
- "slots": [
2009
+ "description": "Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selections in lists.\n\nA checkbox component contains an optional label and an optional helper text.",
2010
+ "name": "Checkbox",
2011
+ "cssProperties": [
2003
2012
  {
2004
- "description": "Text label of the button.",
2005
- "name": ""
2006
- }
2007
- ],
2008
- "members": [
2013
+ "description": "Allows customization of the background color on hover.",
2014
+ "name": "--mdc-checkbox-background-color-hover"
2015
+ },
2009
2016
  {
2010
- "kind": "field",
2011
- "name": "prefixIcon",
2012
- "type": {
2013
- "text": "string | undefined"
2014
- },
2015
- "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
2016
- "attribute": "prefix-icon",
2017
- "reflects": true
2017
+ "description": "Border color in high contrast.",
2018
+ "name": "--mdc-checkbox-border-color"
2018
2019
  },
2019
2020
  {
2020
- "kind": "field",
2021
- "name": "postfixIcon",
2022
- "type": {
2023
- "text": "string | undefined"
2024
- },
2025
- "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
2026
- "attribute": "postfix-icon",
2027
- "reflects": true
2021
+ "description": "Background color for a selected checkbox.",
2022
+ "name": "--mdc-checkbox-checked-background-color"
2028
2023
  },
2029
2024
  {
2030
- "kind": "field",
2031
- "name": "variant",
2032
- "type": {
2033
- "text": "ButtonVariant"
2034
- },
2035
- "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
2036
- "default": "primary",
2037
- "attribute": "variant"
2025
+ "description": "Background color for a selected checkbox when hovered.",
2026
+ "name": "--mdc-checkbox-checked-background-color-hover"
2038
2027
  },
2039
2028
  {
2040
- "kind": "field",
2041
- "name": "size",
2042
- "type": {
2043
- "text": "ButtonSize"
2044
- },
2045
- "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
2046
- "default": "32",
2047
- "attribute": "size",
2048
- "reflects": true,
2049
- "inheritedFrom": {
2050
- "name": "Buttonsimple",
2051
- "module": "components/buttonsimple/buttonsimple.component.js"
2052
- }
2029
+ "description": "Background color for a selected checkbox when pressed.",
2030
+ "name": "--mdc-checkbox-checked-pressed-icon-color"
2031
+ },
2032
+ {
2033
+ "description": "Background color for a disabled checkbox.",
2034
+ "name": "--mdc-checkbox-disabled-background-color"
2035
+ },
2036
+ {
2037
+ "description": "Border color for a disabled checkbox.",
2038
+ "name": "--mdc-checkbox-disabled-border-color"
2039
+ },
2040
+ {
2041
+ "description": "Background color for a disabled, selected checkbox.",
2042
+ "name": "--mdc-checkbox-disabled-checked-icon-color"
2053
2043
  },
2044
+ {
2045
+ "description": "Icon color for a disabled checkbox.",
2046
+ "name": "--mdc-checkbox-disabled-icon-color"
2047
+ },
2048
+ {
2049
+ "description": "Background color for an unselected checkbox.",
2050
+ "name": "--mdc-checkbox-icon-background-color"
2051
+ },
2052
+ {
2053
+ "description": "Default background color for an unselected checkbox.",
2054
+ "name": "--mdc-checkbox-icon-border-color"
2055
+ },
2056
+ {
2057
+ "description": "Icon color for an unselected checkbox.",
2058
+ "name": "--mdc-checkbox-icon-color"
2059
+ },
2060
+ {
2061
+ "description": "Background color for a selected checkbox when pressed.",
2062
+ "name": "--mdc-checkbox-pressed-icon-color"
2063
+ }
2064
+ ],
2065
+ "members": [
2054
2066
  {
2055
2067
  "kind": "field",
2056
- "name": "color",
2068
+ "name": "checked",
2057
2069
  "type": {
2058
- "text": "ButtonColor"
2070
+ "text": "boolean"
2059
2071
  },
2060
- "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
2061
- "default": "default",
2062
- "attribute": "color"
2072
+ "default": "false",
2073
+ "description": "Determines whether the checkbox is selected or unselected.",
2074
+ "attribute": "checked",
2075
+ "reflects": true
2063
2076
  },
2064
2077
  {
2065
2078
  "kind": "field",
2066
- "name": "role",
2067
- "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
2068
- "default": "'button'",
2069
- "attribute": "role",
2070
- "reflects": true,
2079
+ "name": "indeterminate",
2071
2080
  "type": {
2072
- "text": "string"
2081
+ "text": "boolean"
2073
2082
  },
2074
- "inheritedFrom": {
2075
- "name": "Buttonsimple",
2076
- "module": "components/buttonsimple/buttonsimple.component.js"
2077
- }
2083
+ "default": "false",
2084
+ "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
2085
+ "attribute": "indeterminate",
2086
+ "reflects": true
2078
2087
  },
2079
2088
  {
2080
2089
  "kind": "method",
2081
- "name": "modifyIconName",
2090
+ "name": "setFormValue",
2082
2091
  "privacy": "private",
2083
- "parameters": [
2084
- {
2085
- "name": "active",
2086
- "type": {
2087
- "text": "boolean"
2088
- },
2089
- "description": "The active state."
2090
- }
2091
- ],
2092
- "description": "Modifies the icon name based on the active state.\nIf the button is active, the icon name is suffixed with '-filled'.\nIf the button is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
2092
+ "description": "Updates the form value to reflect the current state of the checkbox.\nIf checked, the value is set to either the user-provided value or 'on' if no value is provided.\nIf unchecked, the value is set to null."
2093
2093
  },
2094
2094
  {
2095
2095
  "kind": "method",
2096
- "name": "setVariant",
2096
+ "name": "toggleState",
2097
2097
  "privacy": "private",
2098
- "parameters": [
2099
- {
2100
- "name": "variant",
2101
- "type": {
2102
- "text": "ButtonVariant"
2103
- },
2104
- "description": "The variant to set."
2098
+ "return": {
2099
+ "type": {
2100
+ "text": "void"
2105
2101
  }
2106
- ],
2107
- "description": "Sets the variant attribute for the button component.\nIf the provided variant is not included in the BUTTON_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT."
2102
+ },
2103
+ "description": "Toggles the state of the checkbox element.\nIf the element is not disabled, then\nthe checked property is toggled and the indeterminate property is set to false."
2108
2104
  },
2109
2105
  {
2110
2106
  "kind": "method",
2111
- "name": "setSize",
2112
- "privacy": "private",
2107
+ "name": "handleChange",
2108
+ "privacy": "public",
2109
+ "return": {
2110
+ "type": {
2111
+ "text": "void"
2112
+ }
2113
+ },
2113
2114
  "parameters": [
2114
2115
  {
2115
- "name": "size",
2116
+ "name": "event",
2116
2117
  "type": {
2117
- "text": "PillButtonSize | IconButtonSize"
2118
- },
2119
- "description": "The size to set."
2118
+ "text": "Event"
2119
+ }
2120
2120
  }
2121
2121
  ],
2122
- "description": "Sets the size attribute for the button component.\nValidates the size based on the button type (icon, pill, or tertiary).\nDefaults to DEFAULTS.SIZE if invalid."
2122
+ "description": "Toggles the state of the checkbox element.\nand dispatch the new change event."
2123
2123
  },
2124
2124
  {
2125
2125
  "kind": "method",
2126
- "name": "setColor",
2126
+ "name": "handleKeyDown",
2127
2127
  "privacy": "private",
2128
+ "return": {
2129
+ "type": {
2130
+ "text": "void"
2131
+ }
2132
+ },
2128
2133
  "parameters": [
2129
2134
  {
2130
- "name": "color",
2135
+ "name": "event",
2131
2136
  "type": {
2132
- "text": "ButtonColor"
2137
+ "text": "KeyboardEvent"
2133
2138
  },
2134
- "description": "The color to set."
2139
+ "description": "The keyboard event."
2135
2140
  }
2136
2141
  ],
2137
- "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary buttons."
2142
+ "description": "Handles the keydown event on the checkbox.\nWhen the user presses Enter, the form is submitted."
2138
2143
  },
2139
2144
  {
2140
- "kind": "method",
2141
- "name": "inferButtonType",
2142
- "privacy": "private",
2143
- "description": "Infers the type of button based on the presence of slot and/or prefix and postfix icons.",
2144
- "parameters": [
2145
- {
2146
- "description": "default slot of button",
2147
- "name": "slot"
2148
- }
2149
- ]
2145
+ "kind": "field",
2146
+ "name": "internals"
2150
2147
  },
2151
2148
  {
2152
2149
  "kind": "field",
2153
- "name": "tabIndex",
2150
+ "name": "helpTextType",
2154
2151
  "type": {
2155
- "text": "number"
2152
+ "text": "ValidationType"
2156
2153
  },
2157
- "default": "0",
2158
- "description": "This property specifies the tab order of the element.",
2159
- "attribute": "tabIndex",
2154
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
2155
+ "attribute": "help-text-type",
2160
2156
  "reflects": true,
2157
+ "default": "undefined as unknown",
2161
2158
  "inheritedFrom": {
2162
- "name": "Buttonsimple",
2163
- "module": "components/buttonsimple/buttonsimple.component.js"
2159
+ "name": "FormfieldWrapper",
2160
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2164
2161
  }
2165
2162
  },
2166
2163
  {
2167
2164
  "kind": "field",
2168
- "name": "disabled",
2165
+ "name": "name",
2169
2166
  "type": {
2170
- "text": "boolean"
2167
+ "text": "string"
2171
2168
  },
2172
- "default": "false",
2173
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
2174
- "attribute": "disabled",
2169
+ "default": "''",
2170
+ "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
2171
+ "attribute": "name",
2175
2172
  "reflects": true,
2176
2173
  "inheritedFrom": {
2177
- "name": "Buttonsimple",
2178
- "module": "components/buttonsimple/buttonsimple.component.js"
2174
+ "name": "NameMixin",
2175
+ "module": "utils/mixins/NameMixin.js"
2179
2176
  }
2180
2177
  },
2181
2178
  {
2182
2179
  "kind": "field",
2183
- "name": "active",
2180
+ "name": "value",
2184
2181
  "type": {
2185
- "text": "boolean"
2182
+ "text": "string"
2186
2183
  },
2187
- "default": "false",
2188
- "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
2189
- "attribute": "active",
2184
+ "default": "''",
2185
+ "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
2186
+ "attribute": "value",
2190
2187
  "reflects": true,
2191
2188
  "inheritedFrom": {
2192
- "name": "Buttonsimple",
2193
- "module": "components/buttonsimple/buttonsimple.component.js"
2189
+ "name": "ValueMixin",
2190
+ "module": "utils/mixins/ValueMixin.js"
2194
2191
  }
2195
2192
  },
2196
2193
  {
2197
2194
  "kind": "field",
2198
- "name": "softDisabled",
2195
+ "name": "dataAriaLabel",
2199
2196
  "type": {
2200
- "text": "boolean"
2197
+ "text": "string | null"
2201
2198
  },
2202
- "default": "false",
2203
- "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
2204
- "attribute": "soft-disabled",
2199
+ "default": "null",
2200
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
2201
+ "attribute": "data-aria-label",
2202
+ "reflects": true,
2205
2203
  "inheritedFrom": {
2206
- "name": "Buttonsimple",
2207
- "module": "components/buttonsimple/buttonsimple.component.js"
2204
+ "name": "DataAriaLabelMixin",
2205
+ "module": "utils/mixins/DataAriaLabelMixin.js"
2208
2206
  }
2209
2207
  },
2210
2208
  {
2211
2209
  "kind": "field",
2212
- "name": "type",
2210
+ "name": "disabled",
2213
2211
  "type": {
2214
- "text": "ButtonType"
2212
+ "text": "boolean"
2215
2213
  },
2216
- "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
2217
- "default": "button",
2218
- "attribute": "type",
2214
+ "default": "false",
2215
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
2216
+ "attribute": "disabled",
2219
2217
  "reflects": true,
2220
2218
  "inheritedFrom": {
2221
- "name": "Buttonsimple",
2222
- "module": "components/buttonsimple/buttonsimple.component.js"
2219
+ "name": "DisabledMixin",
2220
+ "module": "utils/mixins/DisabledMixin.js"
2223
2221
  }
2224
2222
  },
2225
2223
  {
2226
- "kind": "method",
2227
- "name": "executeAction",
2228
- "privacy": "protected",
2224
+ "kind": "field",
2225
+ "name": "label",
2226
+ "type": {
2227
+ "text": "string | undefined"
2228
+ },
2229
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
2230
+ "attribute": "label",
2231
+ "reflects": true,
2229
2232
  "inheritedFrom": {
2230
- "name": "Buttonsimple",
2231
- "module": "components/buttonsimple/buttonsimple.component.js"
2233
+ "name": "FormfieldWrapper",
2234
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2232
2235
  }
2233
2236
  },
2234
2237
  {
2235
- "kind": "method",
2236
- "name": "setActive",
2237
- "privacy": "protected",
2238
- "parameters": [
2239
- {
2240
- "name": "element",
2241
- "type": {
2242
- "text": "HTMLElement"
2243
- },
2244
- "description": "The button element"
2245
- },
2246
- {
2247
- "name": "active",
2248
- "type": {
2249
- "text": "boolean"
2250
- },
2251
- "description": "The active state of the element"
2252
- }
2253
- ],
2254
- "description": "Sets the aria-pressed attribute based on the active state of the button.",
2238
+ "kind": "field",
2239
+ "name": "id",
2240
+ "default": "`mdc-input-${uuidv4()}`",
2241
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
2242
+ "attribute": "id",
2255
2243
  "inheritedFrom": {
2256
- "name": "Buttonsimple",
2257
- "module": "components/buttonsimple/buttonsimple.component.js"
2244
+ "name": "FormfieldWrapper",
2245
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2258
2246
  }
2259
2247
  },
2260
2248
  {
2261
- "kind": "method",
2262
- "name": "setSoftDisabled",
2263
- "privacy": "private",
2264
- "parameters": [
2265
- {
2266
- "name": "element",
2267
- "type": {
2268
- "text": "HTMLElement"
2269
- },
2270
- "description": "The button element."
2271
- },
2272
- {
2273
- "name": "softDisabled",
2274
- "type": {
2275
- "text": "boolean"
2276
- },
2277
- "description": "The soft-disabled state."
2278
- }
2279
- ],
2280
- "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
2249
+ "kind": "field",
2250
+ "name": "helpText",
2251
+ "type": {
2252
+ "text": "string | undefined"
2253
+ },
2254
+ "description": "The help text that is displayed below the input field.",
2255
+ "attribute": "help-text",
2256
+ "reflects": true,
2281
2257
  "inheritedFrom": {
2282
- "name": "Buttonsimple",
2283
- "module": "components/buttonsimple/buttonsimple.component.js"
2258
+ "name": "FormfieldWrapper",
2259
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2284
2260
  }
2285
2261
  },
2286
2262
  {
2287
2263
  "kind": "method",
2288
- "name": "setDisabled",
2289
- "privacy": "private",
2290
- "parameters": [
2291
- {
2292
- "name": "element",
2293
- "type": {
2294
- "text": "HTMLElement"
2295
- },
2296
- "description": "The button element."
2297
- },
2298
- {
2299
- "name": "disabled",
2300
- "type": {
2301
- "text": "boolean"
2302
- },
2303
- "description": "The disabled state."
2264
+ "name": "renderLabelElement",
2265
+ "privacy": "protected",
2266
+ "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
2267
+ "return": {
2268
+ "type": {
2269
+ "text": ""
2304
2270
  }
2305
- ],
2306
- "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
2271
+ },
2307
2272
  "inheritedFrom": {
2308
- "name": "Buttonsimple",
2309
- "module": "components/buttonsimple/buttonsimple.component.js"
2273
+ "name": "FormfieldWrapper",
2274
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2310
2275
  }
2311
2276
  },
2312
2277
  {
2313
2278
  "kind": "method",
2314
- "name": "triggerClickEvent",
2315
- "privacy": "private",
2279
+ "name": "renderHelpTextIcon",
2280
+ "privacy": "protected",
2281
+ "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
2282
+ "return": {
2283
+ "type": {
2284
+ "text": ""
2285
+ }
2286
+ },
2316
2287
  "inheritedFrom": {
2317
- "name": "Buttonsimple",
2318
- "module": "components/buttonsimple/buttonsimple.component.js"
2288
+ "name": "FormfieldWrapper",
2289
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2319
2290
  }
2320
2291
  },
2321
2292
  {
2322
2293
  "kind": "method",
2323
- "name": "handleKeyDown",
2324
- "privacy": "private",
2325
- "parameters": [
2326
- {
2327
- "name": "event",
2328
- "type": {
2329
- "text": "KeyboardEvent"
2330
- },
2331
- "description": "The keyboard event."
2294
+ "name": "renderHelpText",
2295
+ "privacy": "protected",
2296
+ "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
2297
+ "return": {
2298
+ "type": {
2299
+ "text": ""
2332
2300
  }
2333
- ],
2334
- "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.",
2301
+ },
2335
2302
  "inheritedFrom": {
2336
- "name": "Buttonsimple",
2337
- "module": "components/buttonsimple/buttonsimple.component.js"
2303
+ "name": "FormfieldWrapper",
2304
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2338
2305
  }
2339
2306
  },
2340
2307
  {
2341
2308
  "kind": "method",
2342
- "name": "handleKeyUp",
2343
- "privacy": "private",
2344
- "parameters": [
2345
- {
2346
- "name": "event",
2347
- "type": {
2348
- "text": "KeyboardEvent"
2349
- },
2350
- "description": "The keyboard event."
2309
+ "name": "renderLabel",
2310
+ "privacy": "protected",
2311
+ "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
2312
+ "return": {
2313
+ "type": {
2314
+ "text": ""
2351
2315
  }
2352
- ],
2353
- "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
2316
+ },
2354
2317
  "inheritedFrom": {
2355
- "name": "Buttonsimple",
2356
- "module": "components/buttonsimple/buttonsimple.component.js"
2318
+ "name": "FormfieldWrapper",
2319
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2320
+ }
2321
+ },
2322
+ {
2323
+ "kind": "method",
2324
+ "name": "renderHelperText",
2325
+ "privacy": "protected",
2326
+ "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
2327
+ "return": {
2328
+ "type": {
2329
+ "text": ""
2330
+ }
2331
+ },
2332
+ "inheritedFrom": {
2333
+ "name": "FormfieldWrapper",
2334
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2357
2335
  }
2358
2336
  }
2359
2337
  ],
2360
- "attributes": [
2338
+ "events": [
2361
2339
  {
2362
- "name": "prefix-icon",
2363
2340
  "type": {
2364
- "text": "string | undefined"
2365
- },
2366
- "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
2367
- "fieldName": "prefixIcon"
2368
- },
2341
+ "text": "EventConstructor"
2342
+ }
2343
+ }
2344
+ ],
2345
+ "attributes": [
2369
2346
  {
2370
- "name": "postfix-icon",
2347
+ "name": "checked",
2371
2348
  "type": {
2372
- "text": "string | undefined"
2349
+ "text": "boolean"
2373
2350
  },
2374
- "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
2375
- "fieldName": "postfixIcon"
2351
+ "default": "false",
2352
+ "description": "Determines whether the checkbox is selected or unselected.",
2353
+ "fieldName": "checked"
2376
2354
  },
2377
2355
  {
2378
- "name": "variant",
2356
+ "name": "indeterminate",
2379
2357
  "type": {
2380
- "text": "ButtonVariant"
2358
+ "text": "boolean"
2381
2359
  },
2382
- "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
2383
- "default": "primary",
2384
- "fieldName": "variant"
2360
+ "default": "false",
2361
+ "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
2362
+ "fieldName": "indeterminate"
2385
2363
  },
2386
2364
  {
2387
- "name": "size",
2365
+ "name": "name",
2388
2366
  "type": {
2389
- "text": "ButtonSize"
2367
+ "text": "string"
2390
2368
  },
2391
- "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
2392
- "default": "32",
2393
- "fieldName": "size",
2369
+ "default": "''",
2370
+ "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
2371
+ "fieldName": "name",
2394
2372
  "inheritedFrom": {
2395
- "name": "Buttonsimple",
2396
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
2373
+ "name": "NameMixin",
2374
+ "module": "src/utils/mixins/NameMixin.ts"
2397
2375
  }
2398
2376
  },
2399
2377
  {
2400
- "name": "color",
2401
- "type": {
2402
- "text": "ButtonColor"
2403
- },
2404
- "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
2405
- "default": "default",
2406
- "fieldName": "color"
2407
- },
2408
- {
2409
- "name": "role",
2410
- "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
2411
- "default": "'button'",
2412
- "fieldName": "role",
2378
+ "name": "value",
2413
2379
  "type": {
2414
2380
  "text": "string"
2415
2381
  },
2382
+ "default": "''",
2383
+ "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
2384
+ "fieldName": "value",
2416
2385
  "inheritedFrom": {
2417
- "name": "Buttonsimple",
2418
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
2386
+ "name": "ValueMixin",
2387
+ "module": "src/utils/mixins/ValueMixin.ts"
2419
2388
  }
2420
2389
  },
2421
2390
  {
2422
- "name": "tabIndex",
2391
+ "name": "data-aria-label",
2423
2392
  "type": {
2424
- "text": "number"
2393
+ "text": "string | null"
2425
2394
  },
2426
- "default": "0",
2427
- "description": "This property specifies the tab order of the element.",
2428
- "fieldName": "tabIndex",
2395
+ "default": "null",
2396
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
2397
+ "fieldName": "dataAriaLabel",
2429
2398
  "inheritedFrom": {
2430
- "name": "Buttonsimple",
2431
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
2399
+ "name": "DataAriaLabelMixin",
2400
+ "module": "src/utils/mixins/DataAriaLabelMixin.ts"
2432
2401
  }
2433
2402
  },
2434
2403
  {
@@ -2440,57 +2409,88 @@
2440
2409
  "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
2441
2410
  "fieldName": "disabled",
2442
2411
  "inheritedFrom": {
2443
- "name": "Buttonsimple",
2444
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
2412
+ "name": "DisabledMixin",
2413
+ "module": "src/utils/mixins/DisabledMixin.ts"
2445
2414
  }
2446
2415
  },
2447
2416
  {
2448
- "name": "active",
2417
+ "name": "label",
2449
2418
  "type": {
2450
- "text": "boolean"
2419
+ "text": "string | undefined"
2451
2420
  },
2452
- "default": "false",
2453
- "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
2454
- "fieldName": "active",
2421
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
2422
+ "fieldName": "label",
2455
2423
  "inheritedFrom": {
2456
- "name": "Buttonsimple",
2457
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
2424
+ "name": "FormfieldWrapper",
2425
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
2458
2426
  }
2459
2427
  },
2460
2428
  {
2461
- "name": "soft-disabled",
2429
+ "name": "id",
2430
+ "default": "`mdc-input-${uuidv4()}`",
2431
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
2432
+ "fieldName": "id",
2433
+ "inheritedFrom": {
2434
+ "name": "FormfieldWrapper",
2435
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
2436
+ }
2437
+ },
2438
+ {
2439
+ "name": "help-text-type",
2462
2440
  "type": {
2463
- "text": "boolean"
2441
+ "text": "ValidationType"
2464
2442
  },
2465
- "default": "false",
2466
- "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
2467
- "fieldName": "softDisabled",
2443
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
2444
+ "fieldName": "helpTextType",
2468
2445
  "inheritedFrom": {
2469
- "name": "Buttonsimple",
2470
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
2446
+ "name": "FormfieldWrapper",
2447
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
2471
2448
  }
2472
2449
  },
2473
2450
  {
2474
- "name": "type",
2451
+ "name": "help-text",
2475
2452
  "type": {
2476
- "text": "ButtonType"
2453
+ "text": "string | undefined"
2477
2454
  },
2478
- "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
2479
- "default": "button",
2480
- "fieldName": "type",
2455
+ "description": "The help text that is displayed below the input field.",
2456
+ "fieldName": "helpText",
2481
2457
  "inheritedFrom": {
2482
- "name": "Buttonsimple",
2483
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
2458
+ "name": "FormfieldWrapper",
2459
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
2484
2460
  }
2485
2461
  }
2486
2462
  ],
2463
+ "mixins": [
2464
+ {
2465
+ "name": "NameMixin",
2466
+ "module": "/src/utils/mixins/NameMixin"
2467
+ },
2468
+ {
2469
+ "name": "ValueMixin",
2470
+ "module": "/src/utils/mixins/ValueMixin"
2471
+ },
2472
+ {
2473
+ "name": "DataAriaLabelMixin",
2474
+ "module": "/src/utils/mixins/DataAriaLabelMixin"
2475
+ }
2476
+ ],
2487
2477
  "superclass": {
2488
- "name": "Buttonsimple",
2489
- "module": "/src/components/buttonsimple/buttonsimple.component"
2478
+ "name": "FormfieldWrapper",
2479
+ "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
2490
2480
  },
2491
- "tagName": "mdc-button",
2492
- "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * Button Variants:\n * - **Primary**: Solid background color.\n * - **Secondary**: Transparent background with a solid border.\n * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n *\n * Button Colors:\n * - **Positive**: Green color.\n * - **Negative**: Red color.\n * - **Accent**: Blue color.\n * - **Promotional**: Purple color.\n * - **Default**: White color.\n *\n * Button Sizes (in REM units):\n * - **Pill button**: 40, 32, 28, 24.\n * - **Icon button**: 64, 52, 40, 32, 28, 24.\n * - **Tertiary icon button**: 20.\n *\n * Button Types:\n * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n * - **Icon button**: A button represented by just an icon without any text.\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n */",
2493
- "customElement": true
2481
+ "tagName": "mdc-checkbox",
2482
+ "jsDoc": "/**\n * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selections in lists.\n *\n * A checkbox component contains an optional label and an optional helper text.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-checkbox\n *\n * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.\n * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n */",
2483
+ "customElement": true,
2484
+ "slots": [
2485
+ {
2486
+ "description": "slot to add the label info icon",
2487
+ "name": "label-info",
2488
+ "inheritedFrom": {
2489
+ "name": "FormfieldWrapper",
2490
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
2491
+ }
2492
+ }
2493
+ ]
2494
2494
  }
2495
2495
  ],
2496
2496
  "exports": [
@@ -2498,8 +2498,8 @@
2498
2498
  "kind": "js",
2499
2499
  "name": "default",
2500
2500
  "declaration": {
2501
- "name": "Button",
2502
- "module": "components/button/button.component.js"
2501
+ "name": "Checkbox",
2502
+ "module": "components/checkbox/checkbox.component.js"
2503
2503
  }
2504
2504
  }
2505
2505
  ]