@momentum-design/components 0.46.1 → 0.47.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/browser/index.js +161 -142
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/screenreaderannouncer/index.d.ts +7 -0
  4. package/dist/components/screenreaderannouncer/index.js +4 -0
  5. package/dist/components/screenreaderannouncer/screenreaderannouncer.component.d.ts +110 -0
  6. package/dist/components/screenreaderannouncer/screenreaderannouncer.component.js +212 -0
  7. package/dist/components/screenreaderannouncer/screenreaderannouncer.constants.d.ts +13 -0
  8. package/dist/components/screenreaderannouncer/screenreaderannouncer.constants.js +14 -0
  9. package/dist/components/screenreaderannouncer/screenreaderannouncer.styles.d.ts +2 -0
  10. package/dist/components/screenreaderannouncer/screenreaderannouncer.styles.js +8 -0
  11. package/dist/components/screenreaderannouncer/screenreaderannouncer.types.d.ts +3 -0
  12. package/dist/components/screenreaderannouncer/screenreaderannouncer.types.js +1 -0
  13. package/dist/components/searchfield/searchfield.component.js +5 -1
  14. package/dist/custom-elements.json +917 -738
  15. package/dist/index.d.ts +2 -1
  16. package/dist/index.js +2 -1
  17. package/dist/react/index.d.ts +5 -4
  18. package/dist/react/index.js +5 -4
  19. package/dist/react/screenreaderannouncer/index.d.ts +34 -0
  20. package/dist/react/screenreaderannouncer/index.js +43 -0
  21. package/package.json +1 -1
package/dist/custom-elements.json CHANGED
@@ -4,176 +4,481 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "components/alertchip/alertchip.component.js",
7
+ "path": "components/appheader/appheader.component.js",
8
8
  "declarations": [
9
9
  {
10
10
  "kind": "class",
11
- "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
12
- "name": "AlertChip",
11
+ "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
12
+ "name": "Appheader",
13
+ "cssParts": [
14
+ {
15
+ "description": "The main container for styling the header.",
16
+ "name": "container"
17
+ },
18
+ {
19
+ "description": "The leading section of the header.",
20
+ "name": "leading-section"
21
+ },
22
+ {
23
+ "description": "The center section of the header.",
24
+ "name": "center-section"
25
+ },
26
+ {
27
+ "description": "The trailing section of the header.",
28
+ "name": "trailing-section"
29
+ }
30
+ ],
31
+ "slots": [
32
+ {
33
+ "description": "Slot for the leading section (e.g., brand logo, brand name).",
34
+ "name": "leading"
35
+ },
36
+ {
37
+ "description": "Slot for the center section (e.g., search bar, icons).",
38
+ "name": "center"
39
+ },
40
+ {
41
+ "description": "Slot for the trailing section (e.g., profile avatar, icons).",
42
+ "name": "trailing"
43
+ }
44
+ ],
45
+ "members": [],
46
+ "superclass": {
47
+ "name": "Component",
48
+ "module": "/src/models"
49
+ },
50
+ "tagName": "mdc-appheader",
51
+ "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
52
+ "customElement": true
53
+ }
54
+ ],
55
+ "exports": [
56
+ {
57
+ "kind": "js",
58
+ "name": "default",
59
+ "declaration": {
60
+ "name": "Appheader",
61
+ "module": "components/appheader/appheader.component.js"
62
+ }
63
+ }
64
+ ]
65
+ },
66
+ {
67
+ "kind": "javascript-module",
68
+ "path": "components/avatar/avatar.component.js",
69
+ "declarations": [
70
+ {
71
+ "kind": "class",
72
+ "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.",
73
+ "name": "Avatar",
13
74
  "cssProperties": [
14
75
  {
15
- "description": "The color of the label text",
16
- "name": "--mdc-chip-color"
76
+ "description": "Allows customization of the default background color.",
77
+ "name": "--mdc-avatar-default-background-color"
17
78
  },
18
79
  {
19
- "description": "The color of the icon",
20
- "name": "--mdc-chip-icon-color"
80
+ "description": "Allows customization of the default foreground color.",
81
+ "name": "--mdc-avatar-default-foreground-color"
21
82
  },
22
83
  {
23
- "description": "The border color of the alertchip",
24
- "name": "--mdc-chip-border-color"
84
+ "description": "Allows customization of the loading indicator background color.",
85
+ "name": "--mdc-avatar-loading-indicator-background-color"
25
86
  },
26
87
  {
27
- "description": "The background color of the alertchip",
28
- "name": "--mdc-chip-background-color"
88
+ "description": "Allows customization of the loading indicator foreground color.",
89
+ "name": "--mdc-avatar-loading-indicator-foreground-color"
90
+ },
91
+ {
92
+ "description": "Allows customization of the loading overlay background color.",
93
+ "name": "--mdc-avatar-loading-overlay-background-color"
29
94
  }
30
95
  ],
31
96
  "members": [
32
97
  {
33
98
  "kind": "field",
34
- "name": "variant",
99
+ "name": "src",
35
100
  "type": {
36
- "text": "VariantType"
101
+ "text": "string | undefined"
37
102
  },
38
- "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
39
- "default": "neutral",
40
- "attribute": "variant"
103
+ "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.",
104
+ "attribute": "src",
105
+ "inheritedFrom": {
106
+ "name": "AvatarComponentMixin",
107
+ "module": "utils/mixins/AvatarComponentMixin.js"
108
+ }
41
109
  },
42
110
  {
43
111
  "kind": "field",
44
- "name": "label",
112
+ "name": "initials",
45
113
  "type": {
46
- "text": "string"
114
+ "text": "string | undefined"
47
115
  },
48
- "default": "''",
49
- "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
50
- "attribute": "label"
116
+ "description": "The initials to be displayed for the avatar.",
117
+ "attribute": "initials",
118
+ "inheritedFrom": {
119
+ "name": "AvatarComponentMixin",
120
+ "module": "utils/mixins/AvatarComponentMixin.js"
121
+ }
51
122
  },
52
123
  {
53
124
  "kind": "field",
54
- "name": "tabIndex",
125
+ "name": "presence",
55
126
  "type": {
56
- "text": "number"
127
+ "text": "PresenceType | undefined"
57
128
  },
58
- "default": "0",
59
- "description": "This property specifies the tab order of the element.",
60
- "attribute": "tabIndex",
61
- "reflects": true,
129
+ "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`",
130
+ "attribute": "presence",
62
131
  "inheritedFrom": {
63
- "name": "TabIndexMixin",
64
- "module": "utils/mixins/TabIndexMixin.js"
132
+ "name": "AvatarComponentMixin",
133
+ "module": "utils/mixins/AvatarComponentMixin.js"
65
134
  }
66
135
  },
67
136
  {
68
137
  "kind": "field",
69
- "name": "disabled",
138
+ "name": "size",
70
139
  "type": {
71
- "text": "boolean | undefined"
140
+ "text": "AvatarSize"
72
141
  },
73
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
74
- "default": "undefined",
75
- "attribute": "disabled",
142
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
143
+ "default": "32",
144
+ "attribute": "size",
76
145
  "reflects": true,
77
146
  "inheritedFrom": {
78
- "name": "DisabledMixin",
79
- "module": "utils/mixins/DisabledMixin.js"
147
+ "name": "AvatarComponentMixin",
148
+ "module": "utils/mixins/AvatarComponentMixin.js"
80
149
  }
81
150
  },
82
151
  {
83
152
  "kind": "field",
84
- "name": "active",
153
+ "name": "counter",
85
154
  "type": {
86
- "text": "boolean"
155
+ "text": "number | undefined"
87
156
  },
88
- "default": "false",
89
- "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.",
90
- "attribute": "active",
91
- "reflects": true,
157
+ "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`.",
158
+ "attribute": "counter",
92
159
  "inheritedFrom": {
93
- "name": "Buttonsimple",
94
- "module": "components/buttonsimple/buttonsimple.component.js"
160
+ "name": "AvatarComponentMixin",
161
+ "module": "utils/mixins/AvatarComponentMixin.js"
95
162
  }
96
163
  },
97
164
  {
98
165
  "kind": "field",
99
- "name": "softDisabled",
166
+ "name": "isTyping",
100
167
  "type": {
101
168
  "text": "boolean"
102
169
  },
103
170
  "default": "false",
104
- "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.",
105
- "attribute": "soft-disabled",
171
+ "description": "Represents the typing indicator when the user is typing.",
172
+ "attribute": "is-typing",
106
173
  "inheritedFrom": {
107
- "name": "Buttonsimple",
108
- "module": "components/buttonsimple/buttonsimple.component.js"
174
+ "name": "AvatarComponentMixin",
175
+ "module": "utils/mixins/AvatarComponentMixin.js"
109
176
  }
110
177
  },
111
178
  {
112
179
  "kind": "field",
113
- "name": "size",
180
+ "name": "iconName",
114
181
  "type": {
115
- "text": "ButtonSize"
182
+ "text": "IconNames | undefined"
116
183
  },
117
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
118
- "default": "32",
119
- "attribute": "size",
120
- "reflects": true,
184
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
185
+ "attribute": "icon-name",
121
186
  "inheritedFrom": {
122
- "name": "Buttonsimple",
123
- "module": "components/buttonsimple/buttonsimple.component.js"
187
+ "name": "IconNameMixin",
188
+ "module": "utils/mixins/IconNameMixin.js"
124
189
  }
190
+ }
191
+ ],
192
+ "mixins": [
193
+ {
194
+ "name": "AvatarComponentMixin",
195
+ "module": "/src/utils/mixins/AvatarComponentMixin"
125
196
  },
126
197
  {
127
- "kind": "field",
128
- "name": "role",
129
- "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.",
130
- "default": "button",
131
- "attribute": "role",
132
- "reflects": true,
198
+ "name": "IconNameMixin",
199
+ "module": "/src/utils/mixins/IconNameMixin"
200
+ }
201
+ ],
202
+ "superclass": {
203
+ "name": "Component",
204
+ "module": "/src/models"
205
+ },
206
+ "tagName": "mdc-avatar",
207
+ "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 */",
208
+ "customElement": true,
209
+ "attributes": [
210
+ {
211
+ "name": "src",
212
+ "type": {
213
+ "text": "string | undefined"
214
+ },
215
+ "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.",
216
+ "fieldName": "src",
133
217
  "inheritedFrom": {
134
- "name": "Buttonsimple",
135
- "module": "components/buttonsimple/buttonsimple.component.js"
218
+ "name": "AvatarComponentMixin",
219
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
136
220
  }
137
221
  },
138
222
  {
139
- "kind": "field",
140
- "name": "type",
223
+ "name": "initials",
141
224
  "type": {
142
- "text": "ButtonType"
225
+ "text": "string | undefined"
143
226
  },
144
- "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.",
145
- "default": "button",
146
- "attribute": "type",
147
- "reflects": true,
227
+ "description": "The initials to be displayed for the avatar.",
228
+ "fieldName": "initials",
148
229
  "inheritedFrom": {
149
- "name": "Buttonsimple",
150
- "module": "components/buttonsimple/buttonsimple.component.js"
230
+ "name": "AvatarComponentMixin",
231
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
151
232
  }
152
233
  },
153
234
  {
154
- "kind": "method",
155
- "name": "executeAction",
156
- "privacy": "protected",
235
+ "name": "presence",
236
+ "type": {
237
+ "text": "PresenceType | undefined"
238
+ },
239
+ "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`",
240
+ "fieldName": "presence",
157
241
  "inheritedFrom": {
158
- "name": "Buttonsimple",
159
- "module": "components/buttonsimple/buttonsimple.component.js"
242
+ "name": "AvatarComponentMixin",
243
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
160
244
  }
161
245
  },
162
246
  {
163
- "kind": "method",
164
- "name": "setActive",
165
- "privacy": "protected",
166
- "parameters": [
167
- {
168
- "name": "element",
169
- "type": {
170
- "text": "HTMLElement"
171
- },
172
- "description": "The button element"
173
- },
174
- {
175
- "name": "active",
176
- "type": {
247
+ "name": "size",
248
+ "type": {
249
+ "text": "AvatarSize"
250
+ },
251
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
252
+ "default": "32",
253
+ "fieldName": "size",
254
+ "inheritedFrom": {
255
+ "name": "AvatarComponentMixin",
256
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
257
+ }
258
+ },
259
+ {
260
+ "name": "counter",
261
+ "type": {
262
+ "text": "number | undefined"
263
+ },
264
+ "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`.",
265
+ "fieldName": "counter",
266
+ "inheritedFrom": {
267
+ "name": "AvatarComponentMixin",
268
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
269
+ }
270
+ },
271
+ {
272
+ "name": "is-typing",
273
+ "type": {
274
+ "text": "boolean"
275
+ },
276
+ "default": "false",
277
+ "description": "Represents the typing indicator when the user is typing.",
278
+ "fieldName": "isTyping",
279
+ "inheritedFrom": {
280
+ "name": "AvatarComponentMixin",
281
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
282
+ }
283
+ },
284
+ {
285
+ "name": "icon-name",
286
+ "type": {
287
+ "text": "IconNames | undefined"
288
+ },
289
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
290
+ "fieldName": "iconName",
291
+ "inheritedFrom": {
292
+ "name": "IconNameMixin",
293
+ "module": "src/utils/mixins/IconNameMixin.ts"
294
+ }
295
+ }
296
+ ]
297
+ }
298
+ ],
299
+ "exports": [
300
+ {
301
+ "kind": "js",
302
+ "name": "default",
303
+ "declaration": {
304
+ "name": "Avatar",
305
+ "module": "components/avatar/avatar.component.js"
306
+ }
307
+ }
308
+ ]
309
+ },
310
+ {
311
+ "kind": "javascript-module",
312
+ "path": "components/alertchip/alertchip.component.js",
313
+ "declarations": [
314
+ {
315
+ "kind": "class",
316
+ "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
317
+ "name": "AlertChip",
318
+ "cssProperties": [
319
+ {
320
+ "description": "The color of the label text",
321
+ "name": "--mdc-chip-color"
322
+ },
323
+ {
324
+ "description": "The color of the icon",
325
+ "name": "--mdc-chip-icon-color"
326
+ },
327
+ {
328
+ "description": "The border color of the alertchip",
329
+ "name": "--mdc-chip-border-color"
330
+ },
331
+ {
332
+ "description": "The background color of the alertchip",
333
+ "name": "--mdc-chip-background-color"
334
+ }
335
+ ],
336
+ "members": [
337
+ {
338
+ "kind": "field",
339
+ "name": "variant",
340
+ "type": {
341
+ "text": "VariantType"
342
+ },
343
+ "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
344
+ "default": "neutral",
345
+ "attribute": "variant"
346
+ },
347
+ {
348
+ "kind": "field",
349
+ "name": "label",
350
+ "type": {
351
+ "text": "string"
352
+ },
353
+ "default": "''",
354
+ "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
355
+ "attribute": "label"
356
+ },
357
+ {
358
+ "kind": "field",
359
+ "name": "tabIndex",
360
+ "type": {
361
+ "text": "number"
362
+ },
363
+ "default": "0",
364
+ "description": "This property specifies the tab order of the element.",
365
+ "attribute": "tabIndex",
366
+ "reflects": true,
367
+ "inheritedFrom": {
368
+ "name": "TabIndexMixin",
369
+ "module": "utils/mixins/TabIndexMixin.js"
370
+ }
371
+ },
372
+ {
373
+ "kind": "field",
374
+ "name": "disabled",
375
+ "type": {
376
+ "text": "boolean | undefined"
377
+ },
378
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
379
+ "default": "undefined",
380
+ "attribute": "disabled",
381
+ "reflects": true,
382
+ "inheritedFrom": {
383
+ "name": "DisabledMixin",
384
+ "module": "utils/mixins/DisabledMixin.js"
385
+ }
386
+ },
387
+ {
388
+ "kind": "field",
389
+ "name": "active",
390
+ "type": {
391
+ "text": "boolean"
392
+ },
393
+ "default": "false",
394
+ "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.",
395
+ "attribute": "active",
396
+ "reflects": true,
397
+ "inheritedFrom": {
398
+ "name": "Buttonsimple",
399
+ "module": "components/buttonsimple/buttonsimple.component.js"
400
+ }
401
+ },
402
+ {
403
+ "kind": "field",
404
+ "name": "softDisabled",
405
+ "type": {
406
+ "text": "boolean"
407
+ },
408
+ "default": "false",
409
+ "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.",
410
+ "attribute": "soft-disabled",
411
+ "inheritedFrom": {
412
+ "name": "Buttonsimple",
413
+ "module": "components/buttonsimple/buttonsimple.component.js"
414
+ }
415
+ },
416
+ {
417
+ "kind": "field",
418
+ "name": "size",
419
+ "type": {
420
+ "text": "ButtonSize"
421
+ },
422
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
423
+ "default": "32",
424
+ "attribute": "size",
425
+ "reflects": true,
426
+ "inheritedFrom": {
427
+ "name": "Buttonsimple",
428
+ "module": "components/buttonsimple/buttonsimple.component.js"
429
+ }
430
+ },
431
+ {
432
+ "kind": "field",
433
+ "name": "role",
434
+ "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.",
435
+ "default": "button",
436
+ "attribute": "role",
437
+ "reflects": true,
438
+ "inheritedFrom": {
439
+ "name": "Buttonsimple",
440
+ "module": "components/buttonsimple/buttonsimple.component.js"
441
+ }
442
+ },
443
+ {
444
+ "kind": "field",
445
+ "name": "type",
446
+ "type": {
447
+ "text": "ButtonType"
448
+ },
449
+ "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.",
450
+ "default": "button",
451
+ "attribute": "type",
452
+ "reflects": true,
453
+ "inheritedFrom": {
454
+ "name": "Buttonsimple",
455
+ "module": "components/buttonsimple/buttonsimple.component.js"
456
+ }
457
+ },
458
+ {
459
+ "kind": "method",
460
+ "name": "executeAction",
461
+ "privacy": "protected",
462
+ "inheritedFrom": {
463
+ "name": "Buttonsimple",
464
+ "module": "components/buttonsimple/buttonsimple.component.js"
465
+ }
466
+ },
467
+ {
468
+ "kind": "method",
469
+ "name": "setActive",
470
+ "privacy": "protected",
471
+ "parameters": [
472
+ {
473
+ "name": "element",
474
+ "type": {
475
+ "text": "HTMLElement"
476
+ },
477
+ "description": "The button element"
478
+ },
479
+ {
480
+ "name": "active",
481
+ "type": {
177
482
  "text": "boolean"
178
483
  },
179
484
  "description": "The active state of the element"
@@ -393,370 +698,65 @@
393
698
  "name": "type",
394
699
  "type": {
395
700
  "text": "ButtonType"
396
- },
397
- "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.",
398
- "default": "button",
399
- "fieldName": "type",
400
- "inheritedFrom": {
401
- "name": "Buttonsimple",
402
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
403
- }
404
- }
405
- ],
406
- "superclass": {
407
- "name": "Buttonsimple",
408
- "module": "/src/components/buttonsimple/buttonsimple.component"
409
- },
410
- "tagName": "mdc-alertchip",
411
- "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
412
- "customElement": true,
413
- "events": [
414
- {
415
- "description": "(React: onClick) This event is dispatched when the button is clicked.",
416
- "name": "click",
417
- "reactName": "onClick",
418
- "eventName": "ClickEvent",
419
- "inheritedFrom": {
420
- "name": "Buttonsimple",
421
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
422
- }
423
- },
424
- {
425
- "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
426
- "name": "keydown",
427
- "reactName": "onKeyDown",
428
- "eventName": "KeydownEvent",
429
- "inheritedFrom": {
430
- "name": "Buttonsimple",
431
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
432
- }
433
- },
434
- {
435
- "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
436
- "name": "keyup",
437
- "reactName": "onKeyUp",
438
- "eventName": "KeyupEvent",
439
- "inheritedFrom": {
440
- "name": "Buttonsimple",
441
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
442
- }
443
- },
444
- {
445
- "description": "(React: onFocus) This event is dispatched when the button receives focus.",
446
- "name": "focus",
447
- "reactName": "onFocus",
448
- "eventName": "FocusEvent",
449
- "inheritedFrom": {
450
- "name": "Buttonsimple",
451
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
452
- }
453
- }
454
- ]
455
- }
456
- ],
457
- "exports": [
458
- {
459
- "kind": "js",
460
- "name": "default",
461
- "declaration": {
462
- "name": "AlertChip",
463
- "module": "components/alertchip/alertchip.component.js"
464
- }
465
- }
466
- ]
467
- },
468
- {
469
- "kind": "javascript-module",
470
- "path": "components/avatar/avatar.component.js",
471
- "declarations": [
472
- {
473
- "kind": "class",
474
- "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.",
475
- "name": "Avatar",
476
- "cssProperties": [
477
- {
478
- "description": "Allows customization of the default background color.",
479
- "name": "--mdc-avatar-default-background-color"
480
- },
481
- {
482
- "description": "Allows customization of the default foreground color.",
483
- "name": "--mdc-avatar-default-foreground-color"
484
- },
485
- {
486
- "description": "Allows customization of the loading indicator background color.",
487
- "name": "--mdc-avatar-loading-indicator-background-color"
488
- },
489
- {
490
- "description": "Allows customization of the loading indicator foreground color.",
491
- "name": "--mdc-avatar-loading-indicator-foreground-color"
492
- },
493
- {
494
- "description": "Allows customization of the loading overlay background color.",
495
- "name": "--mdc-avatar-loading-overlay-background-color"
496
- }
497
- ],
498
- "members": [
499
- {
500
- "kind": "field",
501
- "name": "src",
502
- "type": {
503
- "text": "string | undefined"
504
- },
505
- "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.",
506
- "attribute": "src",
507
- "inheritedFrom": {
508
- "name": "AvatarComponentMixin",
509
- "module": "utils/mixins/AvatarComponentMixin.js"
510
- }
511
- },
512
- {
513
- "kind": "field",
514
- "name": "initials",
515
- "type": {
516
- "text": "string | undefined"
517
- },
518
- "description": "The initials to be displayed for the avatar.",
519
- "attribute": "initials",
520
- "inheritedFrom": {
521
- "name": "AvatarComponentMixin",
522
- "module": "utils/mixins/AvatarComponentMixin.js"
523
- }
524
- },
525
- {
526
- "kind": "field",
527
- "name": "presence",
528
- "type": {
529
- "text": "PresenceType | undefined"
530
- },
531
- "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`",
532
- "attribute": "presence",
533
- "inheritedFrom": {
534
- "name": "AvatarComponentMixin",
535
- "module": "utils/mixins/AvatarComponentMixin.js"
536
- }
537
- },
538
- {
539
- "kind": "field",
540
- "name": "size",
541
- "type": {
542
- "text": "AvatarSize"
543
- },
544
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
545
- "default": "32",
546
- "attribute": "size",
547
- "reflects": true,
548
- "inheritedFrom": {
549
- "name": "AvatarComponentMixin",
550
- "module": "utils/mixins/AvatarComponentMixin.js"
551
- }
552
- },
553
- {
554
- "kind": "field",
555
- "name": "counter",
556
- "type": {
557
- "text": "number | undefined"
558
- },
559
- "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`.",
560
- "attribute": "counter",
561
- "inheritedFrom": {
562
- "name": "AvatarComponentMixin",
563
- "module": "utils/mixins/AvatarComponentMixin.js"
564
- }
565
- },
566
- {
567
- "kind": "field",
568
- "name": "isTyping",
569
- "type": {
570
- "text": "boolean"
571
- },
572
- "default": "false",
573
- "description": "Represents the typing indicator when the user is typing.",
574
- "attribute": "is-typing",
575
- "inheritedFrom": {
576
- "name": "AvatarComponentMixin",
577
- "module": "utils/mixins/AvatarComponentMixin.js"
578
- }
579
- },
580
- {
581
- "kind": "field",
582
- "name": "iconName",
583
- "type": {
584
- "text": "IconNames | undefined"
585
- },
586
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
587
- "attribute": "icon-name",
588
- "inheritedFrom": {
589
- "name": "IconNameMixin",
590
- "module": "utils/mixins/IconNameMixin.js"
591
- }
592
- }
593
- ],
594
- "mixins": [
595
- {
596
- "name": "AvatarComponentMixin",
597
- "module": "/src/utils/mixins/AvatarComponentMixin"
598
- },
599
- {
600
- "name": "IconNameMixin",
601
- "module": "/src/utils/mixins/IconNameMixin"
602
- }
603
- ],
604
- "superclass": {
605
- "name": "Component",
606
- "module": "/src/models"
607
- },
608
- "tagName": "mdc-avatar",
609
- "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 */",
610
- "customElement": true,
611
- "attributes": [
612
- {
613
- "name": "src",
614
- "type": {
615
- "text": "string | undefined"
616
- },
617
- "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.",
618
- "fieldName": "src",
619
- "inheritedFrom": {
620
- "name": "AvatarComponentMixin",
621
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
622
- }
623
- },
624
- {
625
- "name": "initials",
626
- "type": {
627
- "text": "string | undefined"
628
- },
629
- "description": "The initials to be displayed for the avatar.",
630
- "fieldName": "initials",
631
- "inheritedFrom": {
632
- "name": "AvatarComponentMixin",
633
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
634
- }
635
- },
636
- {
637
- "name": "presence",
638
- "type": {
639
- "text": "PresenceType | undefined"
640
- },
641
- "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`",
642
- "fieldName": "presence",
643
- "inheritedFrom": {
644
- "name": "AvatarComponentMixin",
645
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
646
- }
647
- },
648
- {
649
- "name": "size",
650
- "type": {
651
- "text": "AvatarSize"
652
- },
653
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
654
- "default": "32",
655
- "fieldName": "size",
656
- "inheritedFrom": {
657
- "name": "AvatarComponentMixin",
658
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
659
- }
660
- },
661
- {
662
- "name": "counter",
663
- "type": {
664
- "text": "number | undefined"
665
- },
666
- "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`.",
667
- "fieldName": "counter",
668
- "inheritedFrom": {
669
- "name": "AvatarComponentMixin",
670
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
671
- }
672
- },
673
- {
674
- "name": "is-typing",
675
- "type": {
676
- "text": "boolean"
677
- },
678
- "default": "false",
679
- "description": "Represents the typing indicator when the user is typing.",
680
- "fieldName": "isTyping",
681
- "inheritedFrom": {
682
- "name": "AvatarComponentMixin",
683
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
684
- }
685
- },
686
- {
687
- "name": "icon-name",
688
- "type": {
689
- "text": "IconNames | undefined"
690
- },
691
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
692
- "fieldName": "iconName",
693
- "inheritedFrom": {
694
- "name": "IconNameMixin",
695
- "module": "src/utils/mixins/IconNameMixin.ts"
696
- }
697
- }
698
- ]
699
- }
700
- ],
701
- "exports": [
702
- {
703
- "kind": "js",
704
- "name": "default",
705
- "declaration": {
706
- "name": "Avatar",
707
- "module": "components/avatar/avatar.component.js"
708
- }
709
- }
710
- ]
711
- },
712
- {
713
- "kind": "javascript-module",
714
- "path": "components/appheader/appheader.component.js",
715
- "declarations": [
716
- {
717
- "kind": "class",
718
- "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
719
- "name": "Appheader",
720
- "cssParts": [
721
- {
722
- "description": "The main container for styling the header.",
723
- "name": "container"
724
- },
725
- {
726
- "description": "The leading section of the header.",
727
- "name": "leading-section"
728
- },
729
- {
730
- "description": "The center section of the header.",
731
- "name": "center-section"
732
- },
733
- {
734
- "description": "The trailing section of the header.",
735
- "name": "trailing-section"
701
+ },
702
+ "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.",
703
+ "default": "button",
704
+ "fieldName": "type",
705
+ "inheritedFrom": {
706
+ "name": "Buttonsimple",
707
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
708
+ }
736
709
  }
737
710
  ],
738
- "slots": [
711
+ "superclass": {
712
+ "name": "Buttonsimple",
713
+ "module": "/src/components/buttonsimple/buttonsimple.component"
714
+ },
715
+ "tagName": "mdc-alertchip",
716
+ "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
717
+ "customElement": true,
718
+ "events": [
739
719
  {
740
- "description": "Slot for the leading section (e.g., brand logo, brand name).",
741
- "name": "leading"
720
+ "description": "(React: onClick) This event is dispatched when the button is clicked.",
721
+ "name": "click",
722
+ "reactName": "onClick",
723
+ "eventName": "ClickEvent",
724
+ "inheritedFrom": {
725
+ "name": "Buttonsimple",
726
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
727
+ }
742
728
  },
743
729
  {
744
- "description": "Slot for the center section (e.g., search bar, icons).",
745
- "name": "center"
730
+ "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
731
+ "name": "keydown",
732
+ "reactName": "onKeyDown",
733
+ "eventName": "KeydownEvent",
734
+ "inheritedFrom": {
735
+ "name": "Buttonsimple",
736
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
737
+ }
746
738
  },
747
739
  {
748
- "description": "Slot for the trailing section (e.g., profile avatar, icons).",
749
- "name": "trailing"
740
+ "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
741
+ "name": "keyup",
742
+ "reactName": "onKeyUp",
743
+ "eventName": "KeyupEvent",
744
+ "inheritedFrom": {
745
+ "name": "Buttonsimple",
746
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
747
+ }
748
+ },
749
+ {
750
+ "description": "(React: onFocus) This event is dispatched when the button receives focus.",
751
+ "name": "focus",
752
+ "reactName": "onFocus",
753
+ "eventName": "FocusEvent",
754
+ "inheritedFrom": {
755
+ "name": "Buttonsimple",
756
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
757
+ }
750
758
  }
751
- ],
752
- "members": [],
753
- "superclass": {
754
- "name": "Component",
755
- "module": "/src/models"
756
- },
757
- "tagName": "mdc-appheader",
758
- "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
759
- "customElement": true
759
+ ]
760
760
  }
761
761
  ],
762
762
  "exports": [
@@ -764,8 +764,8 @@
764
764
  "kind": "js",
765
765
  "name": "default",
766
766
  "declaration": {
767
- "name": "Appheader",
768
- "module": "components/appheader/appheader.component.js"
767
+ "name": "AlertChip",
768
+ "module": "components/alertchip/alertchip.component.js"
769
769
  }
770
770
  }
771
771
  ]
@@ -1619,65 +1619,242 @@
1619
1619
  "fieldName": "variant"
1620
1620
  },
1621
1621
  {
1622
- "name": "counter",
1623
- "type": {
1624
- "text": "number | undefined"
1625
- },
1626
- "description": "Counter is the number which can be provided in the badge.",
1627
- "fieldName": "counter"
1622
+ "name": "counter",
1623
+ "type": {
1624
+ "text": "number | undefined"
1625
+ },
1626
+ "description": "Counter is the number which can be provided in the badge.",
1627
+ "fieldName": "counter"
1628
+ },
1629
+ {
1630
+ "name": "max-counter",
1631
+ "type": {
1632
+ "text": "number"
1633
+ },
1634
+ "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
1635
+ "default": "99",
1636
+ "fieldName": "maxCounter"
1637
+ },
1638
+ {
1639
+ "name": "overlay",
1640
+ "type": {
1641
+ "text": "boolean"
1642
+ },
1643
+ "default": "false",
1644
+ "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
1645
+ "fieldName": "overlay"
1646
+ },
1647
+ {
1648
+ "name": "aria-label",
1649
+ "type": {
1650
+ "text": "string | null"
1651
+ },
1652
+ "default": "null",
1653
+ "description": "Aria-label attribute to be set for accessibility",
1654
+ "fieldName": "ariaLabel"
1655
+ },
1656
+ {
1657
+ "name": "icon-name",
1658
+ "type": {
1659
+ "text": "IconNames | undefined"
1660
+ },
1661
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
1662
+ "fieldName": "iconName",
1663
+ "inheritedFrom": {
1664
+ "name": "IconNameMixin",
1665
+ "module": "src/utils/mixins/IconNameMixin.ts"
1666
+ }
1667
+ }
1668
+ ],
1669
+ "mixins": [
1670
+ {
1671
+ "name": "IconNameMixin",
1672
+ "module": "/src/utils/mixins/IconNameMixin"
1673
+ }
1674
+ ],
1675
+ "superclass": {
1676
+ "name": "Component",
1677
+ "module": "/src/models"
1678
+ },
1679
+ "tagName": "mdc-badge",
1680
+ "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
1681
+ "customElement": true
1682
+ }
1683
+ ],
1684
+ "exports": [
1685
+ {
1686
+ "kind": "js",
1687
+ "name": "default",
1688
+ "declaration": {
1689
+ "name": "Badge",
1690
+ "module": "components/badge/badge.component.js"
1691
+ }
1692
+ }
1693
+ ]
1694
+ },
1695
+ {
1696
+ "kind": "javascript-module",
1697
+ "path": "components/brandvisual/brandvisual.component.js",
1698
+ "declarations": [
1699
+ {
1700
+ "kind": "class",
1701
+ "description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
1702
+ "name": "Brandvisual",
1703
+ "members": [
1704
+ {
1705
+ "kind": "field",
1706
+ "name": "brandVisualData",
1707
+ "type": {
1708
+ "text": "HTMLElement | undefined"
1709
+ },
1710
+ "privacy": "private"
1711
+ },
1712
+ {
1713
+ "kind": "field",
1714
+ "name": "name",
1715
+ "type": {
1716
+ "text": "BrandVisualNames | undefined"
1717
+ },
1718
+ "description": "Name of the brandVisual (= filename)",
1719
+ "attribute": "name",
1720
+ "reflects": true
1721
+ },
1722
+ {
1723
+ "kind": "method",
1724
+ "name": "getBrandVisualData",
1725
+ "privacy": "private"
1726
+ },
1727
+ {
1728
+ "kind": "method",
1729
+ "name": "handleBrandVisualLoadedSuccess",
1730
+ "privacy": "private",
1731
+ "parameters": [
1732
+ {
1733
+ "name": "brandVisualHtml",
1734
+ "type": {
1735
+ "text": "HTMLElement"
1736
+ },
1737
+ "description": "The brandvisual html element which has been fetched from the brandvisual provider."
1738
+ }
1739
+ ],
1740
+ "description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
1741
+ },
1742
+ {
1743
+ "kind": "method",
1744
+ "name": "handleBrandVisualLoadedFailure",
1745
+ "privacy": "private",
1746
+ "parameters": [
1747
+ {
1748
+ "name": "error",
1749
+ "type": {
1750
+ "text": "unknown"
1751
+ }
1752
+ }
1753
+ ],
1754
+ "description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
1755
+ }
1756
+ ],
1757
+ "events": [
1758
+ {
1759
+ "description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
1760
+ "name": "load",
1761
+ "reactName": "onLoad",
1762
+ "eventName": "LoadEvent"
1763
+ },
1764
+ {
1765
+ "description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
1766
+ "name": "error",
1767
+ "reactName": "onError",
1768
+ "eventName": "ErrorEvent"
1769
+ }
1770
+ ],
1771
+ "attributes": [
1772
+ {
1773
+ "name": "name",
1774
+ "type": {
1775
+ "text": "BrandVisualNames | undefined"
1776
+ },
1777
+ "description": "Name of the brandVisual (= filename)",
1778
+ "fieldName": "name"
1779
+ }
1780
+ ],
1781
+ "superclass": {
1782
+ "name": "Component",
1783
+ "module": "/src/models"
1784
+ },
1785
+ "tagName": "mdc-brandvisual",
1786
+ "jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
1787
+ "customElement": true
1788
+ }
1789
+ ],
1790
+ "exports": [
1791
+ {
1792
+ "kind": "js",
1793
+ "name": "default",
1794
+ "declaration": {
1795
+ "name": "Brandvisual",
1796
+ "module": "components/brandvisual/brandvisual.component.js"
1797
+ }
1798
+ }
1799
+ ]
1800
+ },
1801
+ {
1802
+ "kind": "javascript-module",
1803
+ "path": "components/bullet/bullet.component.js",
1804
+ "declarations": [
1805
+ {
1806
+ "kind": "class",
1807
+ "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
1808
+ "name": "Bullet",
1809
+ "cssProperties": [
1810
+ {
1811
+ "description": "background color of the bullet",
1812
+ "name": "--mdc-bullet-background-color"
1628
1813
  },
1629
1814
  {
1630
- "name": "max-counter",
1631
- "type": {
1632
- "text": "number"
1633
- },
1634
- "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
1635
- "default": "99",
1636
- "fieldName": "maxCounter"
1815
+ "description": "small size value of the bullet",
1816
+ "name": "--mdc-bullet-size-small"
1637
1817
  },
1638
1818
  {
1639
- "name": "overlay",
1640
- "type": {
1641
- "text": "boolean"
1642
- },
1643
- "default": "false",
1644
- "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
1645
- "fieldName": "overlay"
1819
+ "description": "medium size value of the bullet",
1820
+ "name": "--mdc-bullet-size-medium"
1646
1821
  },
1647
1822
  {
1648
- "name": "aria-label",
1649
- "type": {
1650
- "text": "string | null"
1651
- },
1652
- "default": "null",
1653
- "description": "Aria-label attribute to be set for accessibility",
1654
- "fieldName": "ariaLabel"
1655
- },
1823
+ "description": "large size value of the bullet",
1824
+ "name": "--mdc-bullet-size-large"
1825
+ }
1826
+ ],
1827
+ "members": [
1656
1828
  {
1657
- "name": "icon-name",
1829
+ "kind": "field",
1830
+ "name": "size",
1658
1831
  "type": {
1659
- "text": "IconNames | undefined"
1832
+ "text": "Size"
1660
1833
  },
1661
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
1662
- "fieldName": "iconName",
1663
- "inheritedFrom": {
1664
- "name": "IconNameMixin",
1665
- "module": "src/utils/mixins/IconNameMixin.ts"
1666
- }
1834
+ "privacy": "public",
1835
+ "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
1836
+ "default": "small",
1837
+ "attribute": "size",
1838
+ "reflects": true
1667
1839
  }
1668
1840
  ],
1669
- "mixins": [
1841
+ "attributes": [
1670
1842
  {
1671
- "name": "IconNameMixin",
1672
- "module": "/src/utils/mixins/IconNameMixin"
1843
+ "name": "size",
1844
+ "type": {
1845
+ "text": "Size"
1846
+ },
1847
+ "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
1848
+ "default": "small",
1849
+ "fieldName": "size"
1673
1850
  }
1674
1851
  ],
1675
1852
  "superclass": {
1676
1853
  "name": "Component",
1677
1854
  "module": "/src/models"
1678
1855
  },
1679
- "tagName": "mdc-badge",
1680
- "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
1856
+ "tagName": "mdc-bullet",
1857
+ "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
1681
1858
  "customElement": true
1682
1859
  }
1683
1860
  ],
@@ -1686,8 +1863,8 @@
1686
1863
  "kind": "js",
1687
1864
  "name": "default",
1688
1865
  "declaration": {
1689
- "name": "Badge",
1690
- "module": "components/badge/badge.component.js"
1866
+ "name": "Bullet",
1867
+ "module": "components/bullet/bullet.component.js"
1691
1868
  }
1692
1869
  }
1693
1870
  ]
@@ -2482,273 +2659,96 @@
2482
2659
  {
2483
2660
  "description": "(React: onFocus) This event is dispatched when the button receives focus.",
2484
2661
  "name": "focus",
2485
- "reactName": "onFocus",
2486
- "eventName": "FocusEvent"
2487
- }
2488
- ],
2489
- "attributes": [
2490
- {
2491
- "name": "active",
2492
- "type": {
2493
- "text": "boolean"
2494
- },
2495
- "default": "false",
2496
- "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.",
2497
- "fieldName": "active"
2498
- },
2499
- {
2500
- "name": "soft-disabled",
2501
- "type": {
2502
- "text": "boolean"
2503
- },
2504
- "default": "false",
2505
- "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.",
2506
- "fieldName": "softDisabled"
2507
- },
2508
- {
2509
- "name": "size",
2510
- "type": {
2511
- "text": "ButtonSize"
2512
- },
2513
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
2514
- "default": "32",
2515
- "fieldName": "size"
2516
- },
2517
- {
2518
- "name": "role",
2519
- "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.",
2520
- "default": "button",
2521
- "fieldName": "role"
2522
- },
2523
- {
2524
- "name": "type",
2525
- "type": {
2526
- "text": "ButtonType"
2527
- },
2528
- "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.",
2529
- "default": "button",
2530
- "fieldName": "type"
2531
- },
2532
- {
2533
- "name": "tabIndex",
2534
- "type": {
2535
- "text": "number"
2536
- },
2537
- "default": "0",
2538
- "description": "This property specifies the tab order of the element.",
2539
- "fieldName": "tabIndex",
2540
- "inheritedFrom": {
2541
- "name": "TabIndexMixin",
2542
- "module": "src/utils/mixins/TabIndexMixin.ts"
2543
- }
2544
- },
2545
- {
2546
- "name": "disabled",
2547
- "type": {
2548
- "text": "boolean | undefined"
2549
- },
2550
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
2551
- "default": "undefined",
2552
- "fieldName": "disabled",
2553
- "inheritedFrom": {
2554
- "name": "DisabledMixin",
2555
- "module": "src/utils/mixins/DisabledMixin.ts"
2556
- }
2557
- }
2558
- ],
2559
- "mixins": [
2560
- {
2561
- "name": "TabIndexMixin",
2562
- "module": "/src/utils/mixins/TabIndexMixin"
2563
- },
2564
- {
2565
- "name": "DisabledMixin",
2566
- "module": "/src/utils/mixins/DisabledMixin"
2567
- }
2568
- ],
2569
- "superclass": {
2570
- "name": "Component",
2571
- "module": "/src/models"
2572
- },
2573
- "tagName": "mdc-buttonsimple",
2574
- "jsDoc": "/**\n * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\n * It is used as an internal component and is not intended to be used directly by consumers.\n * Consumers should use the `mdc-button` component instead.\n *\n * @event click - (React: onClick) This event is dispatched when the button is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.\n * @event focus - (React: onFocus) This event is dispatched when the button receives focus.\n *\n * @tagname mdc-buttonsimple\n */",
2575
- "customElement": true
2576
- }
2577
- ],
2578
- "exports": [
2579
- {
2580
- "kind": "js",
2581
- "name": "default",
2582
- "declaration": {
2583
- "name": "Buttonsimple",
2584
- "module": "components/buttonsimple/buttonsimple.component.js"
2585
- }
2586
- }
2587
- ]
2588
- },
2589
- {
2590
- "kind": "javascript-module",
2591
- "path": "components/brandvisual/brandvisual.component.js",
2592
- "declarations": [
2593
- {
2594
- "kind": "class",
2595
- "description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
2596
- "name": "Brandvisual",
2597
- "members": [
2598
- {
2599
- "kind": "field",
2600
- "name": "brandVisualData",
2601
- "type": {
2602
- "text": "HTMLElement | undefined"
2603
- },
2604
- "privacy": "private"
2605
- },
2606
- {
2607
- "kind": "field",
2608
- "name": "name",
2609
- "type": {
2610
- "text": "BrandVisualNames | undefined"
2611
- },
2612
- "description": "Name of the brandVisual (= filename)",
2613
- "attribute": "name",
2614
- "reflects": true
2615
- },
2616
- {
2617
- "kind": "method",
2618
- "name": "getBrandVisualData",
2619
- "privacy": "private"
2620
- },
2621
- {
2622
- "kind": "method",
2623
- "name": "handleBrandVisualLoadedSuccess",
2624
- "privacy": "private",
2625
- "parameters": [
2626
- {
2627
- "name": "brandVisualHtml",
2628
- "type": {
2629
- "text": "HTMLElement"
2630
- },
2631
- "description": "The brandvisual html element which has been fetched from the brandvisual provider."
2632
- }
2633
- ],
2634
- "description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
2635
- },
2636
- {
2637
- "kind": "method",
2638
- "name": "handleBrandVisualLoadedFailure",
2639
- "privacy": "private",
2640
- "parameters": [
2641
- {
2642
- "name": "error",
2643
- "type": {
2644
- "text": "unknown"
2645
- }
2646
- }
2647
- ],
2648
- "description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
2649
- }
2650
- ],
2651
- "events": [
2652
- {
2653
- "description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
2654
- "name": "load",
2655
- "reactName": "onLoad",
2656
- "eventName": "LoadEvent"
2657
- },
2658
- {
2659
- "description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
2660
- "name": "error",
2661
- "reactName": "onError",
2662
- "eventName": "ErrorEvent"
2662
+ "reactName": "onFocus",
2663
+ "eventName": "FocusEvent"
2663
2664
  }
2664
2665
  ],
2665
2666
  "attributes": [
2666
2667
  {
2667
- "name": "name",
2668
+ "name": "active",
2668
2669
  "type": {
2669
- "text": "BrandVisualNames | undefined"
2670
+ "text": "boolean"
2670
2671
  },
2671
- "description": "Name of the brandVisual (= filename)",
2672
- "fieldName": "name"
2673
- }
2674
- ],
2675
- "superclass": {
2676
- "name": "Component",
2677
- "module": "/src/models"
2678
- },
2679
- "tagName": "mdc-brandvisual",
2680
- "jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
2681
- "customElement": true
2682
- }
2683
- ],
2684
- "exports": [
2685
- {
2686
- "kind": "js",
2687
- "name": "default",
2688
- "declaration": {
2689
- "name": "Brandvisual",
2690
- "module": "components/brandvisual/brandvisual.component.js"
2691
- }
2692
- }
2693
- ]
2694
- },
2695
- {
2696
- "kind": "javascript-module",
2697
- "path": "components/bullet/bullet.component.js",
2698
- "declarations": [
2699
- {
2700
- "kind": "class",
2701
- "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
2702
- "name": "Bullet",
2703
- "cssProperties": [
2672
+ "default": "false",
2673
+ "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.",
2674
+ "fieldName": "active"
2675
+ },
2704
2676
  {
2705
- "description": "background color of the bullet",
2706
- "name": "--mdc-bullet-background-color"
2677
+ "name": "soft-disabled",
2678
+ "type": {
2679
+ "text": "boolean"
2680
+ },
2681
+ "default": "false",
2682
+ "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.",
2683
+ "fieldName": "softDisabled"
2707
2684
  },
2708
2685
  {
2709
- "description": "small size value of the bullet",
2710
- "name": "--mdc-bullet-size-small"
2686
+ "name": "size",
2687
+ "type": {
2688
+ "text": "ButtonSize"
2689
+ },
2690
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
2691
+ "default": "32",
2692
+ "fieldName": "size"
2711
2693
  },
2712
2694
  {
2713
- "description": "medium size value of the bullet",
2714
- "name": "--mdc-bullet-size-medium"
2695
+ "name": "role",
2696
+ "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.",
2697
+ "default": "button",
2698
+ "fieldName": "role"
2715
2699
  },
2716
2700
  {
2717
- "description": "large size value of the bullet",
2718
- "name": "--mdc-bullet-size-large"
2719
- }
2720
- ],
2721
- "members": [
2701
+ "name": "type",
2702
+ "type": {
2703
+ "text": "ButtonType"
2704
+ },
2705
+ "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.",
2706
+ "default": "button",
2707
+ "fieldName": "type"
2708
+ },
2722
2709
  {
2723
- "kind": "field",
2724
- "name": "size",
2710
+ "name": "tabIndex",
2725
2711
  "type": {
2726
- "text": "Size"
2712
+ "text": "number"
2727
2713
  },
2728
- "privacy": "public",
2729
- "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
2730
- "default": "small",
2731
- "attribute": "size",
2732
- "reflects": true
2733
- }
2734
- ],
2735
- "attributes": [
2714
+ "default": "0",
2715
+ "description": "This property specifies the tab order of the element.",
2716
+ "fieldName": "tabIndex",
2717
+ "inheritedFrom": {
2718
+ "name": "TabIndexMixin",
2719
+ "module": "src/utils/mixins/TabIndexMixin.ts"
2720
+ }
2721
+ },
2736
2722
  {
2737
- "name": "size",
2723
+ "name": "disabled",
2738
2724
  "type": {
2739
- "text": "Size"
2725
+ "text": "boolean | undefined"
2740
2726
  },
2741
- "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
2742
- "default": "small",
2743
- "fieldName": "size"
2727
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
2728
+ "default": "undefined",
2729
+ "fieldName": "disabled",
2730
+ "inheritedFrom": {
2731
+ "name": "DisabledMixin",
2732
+ "module": "src/utils/mixins/DisabledMixin.ts"
2733
+ }
2734
+ }
2735
+ ],
2736
+ "mixins": [
2737
+ {
2738
+ "name": "TabIndexMixin",
2739
+ "module": "/src/utils/mixins/TabIndexMixin"
2740
+ },
2741
+ {
2742
+ "name": "DisabledMixin",
2743
+ "module": "/src/utils/mixins/DisabledMixin"
2744
2744
  }
2745
2745
  ],
2746
2746
  "superclass": {
2747
2747
  "name": "Component",
2748
2748
  "module": "/src/models"
2749
2749
  },
2750
- "tagName": "mdc-bullet",
2751
- "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
2750
+ "tagName": "mdc-buttonsimple",
2751
+ "jsDoc": "/**\n * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\n * It is used as an internal component and is not intended to be used directly by consumers.\n * Consumers should use the `mdc-button` component instead.\n *\n * @event click - (React: onClick) This event is dispatched when the button is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.\n * @event focus - (React: onFocus) This event is dispatched when the button receives focus.\n *\n * @tagname mdc-buttonsimple\n */",
2752
2752
  "customElement": true
2753
2753
  }
2754
2754
  ],
@@ -2757,8 +2757,8 @@
2757
2757
  "kind": "js",
2758
2758
  "name": "default",
2759
2759
  "declaration": {
2760
- "name": "Bullet",
2761
- "module": "components/bullet/bullet.component.js"
2760
+ "name": "Buttonsimple",
2761
+ "module": "components/buttonsimple/buttonsimple.component.js"
2762
2762
  }
2763
2763
  }
2764
2764
  ]
@@ -13179,6 +13179,185 @@
13179
13179
  }
13180
13180
  ]
13181
13181
  },
13182
+ {
13183
+ "kind": "javascript-module",
13184
+ "path": "components/screenreaderannouncer/screenreaderannouncer.component.js",
13185
+ "declarations": [
13186
+ {
13187
+ "kind": "class",
13188
+ "description": "`mdc-screenreaderannouncer` can be used to announce messages with the screen reader.\n\nTo make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.\n\n**Internal logic**\n\nWhen the screenreader announcer is connected to the DOM, if the `identity` attribute is not\nprovided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created\nin the DOM. If the `identity` attribute is provided, the identity element is used and no new element\nis created in the DOM.\n\nWhen the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with\n`aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.\nAfter delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.\n\nThe announcement `<div>` element is removed from the DOM after `timeout` milliseconds.\n\nWhen the screen announcer component is disconnected from the DOM, all the timeouts are cleared and\nall the announcement elements added are removed from the DOM and timeouts cleared.\n\n**Note**\n1. The default delay of 150 miliseconds is used as we dynamically generate the\naria-live region in the DOM and add the announcement text to it.\n3. If no `identity` is provided, all the screen reader components will create and use only one\n`<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.\n\nReference: https://patrickhlauke.github.io/aria/tests/live-regions/",
13189
+ "name": "ScreenreaderAnnouncer",
13190
+ "members": [
13191
+ {
13192
+ "kind": "field",
13193
+ "name": "announcement",
13194
+ "type": {
13195
+ "text": "string"
13196
+ },
13197
+ "default": "''",
13198
+ "description": "The announcement attribute is a string that is used to announce messages to the screen reader.\nThe announcement is made when the announcement attribute is set to a non-empty string.",
13199
+ "attribute": "announcement",
13200
+ "reflects": true
13201
+ },
13202
+ {
13203
+ "kind": "field",
13204
+ "name": "identity",
13205
+ "type": {
13206
+ "text": "string"
13207
+ },
13208
+ "default": "''",
13209
+ "description": "The id of the element in the light dom, to which announcement elements will be appended.\n\nIf id is not provided, it will be set to `mdc-screenreaderannouncer-identity` and\na div element with this id will be created in the light dom.",
13210
+ "attribute": "identity",
13211
+ "reflects": true
13212
+ },
13213
+ {
13214
+ "kind": "field",
13215
+ "name": "dataAriaLive",
13216
+ "type": {
13217
+ "text": "AriaLive"
13218
+ },
13219
+ "description": "Aria live value for announcement.",
13220
+ "default": "'polite'",
13221
+ "attribute": "data-aria-live",
13222
+ "reflects": true
13223
+ },
13224
+ {
13225
+ "kind": "field",
13226
+ "name": "delay",
13227
+ "type": {
13228
+ "text": "number"
13229
+ },
13230
+ "description": "Milliseconds to wait before adding the announcement to the identiy region in\nDOM, which will announce the message to the screen reader.",
13231
+ "default": "150",
13232
+ "attribute": "delay",
13233
+ "reflects": true
13234
+ },
13235
+ {
13236
+ "kind": "field",
13237
+ "name": "timeout",
13238
+ "type": {
13239
+ "text": "number"
13240
+ },
13241
+ "description": "Milliseconds to wait after which the announcement element will be removed from\nidentity region in DOM, causing the screen reader to not announcing the message.",
13242
+ "default": "20_000",
13243
+ "attribute": "timeout",
13244
+ "reflects": true
13245
+ },
13246
+ {
13247
+ "kind": "method",
13248
+ "name": "announce",
13249
+ "parameters": [
13250
+ {
13251
+ "name": "announcement",
13252
+ "type": {
13253
+ "text": "string"
13254
+ },
13255
+ "description": "The announcement to be made."
13256
+ },
13257
+ {
13258
+ "name": "delay",
13259
+ "type": {
13260
+ "text": "number"
13261
+ },
13262
+ "description": "The delay in milliseconds before announcing the message."
13263
+ },
13264
+ {
13265
+ "name": "timeout",
13266
+ "type": {
13267
+ "text": "number"
13268
+ },
13269
+ "description": "The timeout in milliseconds before removing the announcement."
13270
+ },
13271
+ {
13272
+ "name": "ariaLive",
13273
+ "type": {
13274
+ "text": "AriaLive"
13275
+ },
13276
+ "description": "The aria live value for the announcement."
13277
+ }
13278
+ ],
13279
+ "description": "Announces the given announcement to the screen reader.\n\nA div element with aria-live attribute set to the given ariaLive value is created\nand a p element with the announcement text is appended to it.\n\nThe div element is appended to the element in the DOM identified with id as\nidentity attribute."
13280
+ },
13281
+ {
13282
+ "kind": "method",
13283
+ "name": "clearTimeOutsAndAnnouncements",
13284
+ "privacy": "private",
13285
+ "description": "Clears all timeouts and removes all announcements from the screen reader."
13286
+ },
13287
+ {
13288
+ "kind": "method",
13289
+ "name": "createAnnouncementAriaLiveRegion",
13290
+ "privacy": "private",
13291
+ "description": "Creates a div element with id as identity attribute in the DOM.\n\nIf the identity attribute is not provided, it is set internally to\n`mdc-screenreaderannouncer-identity`."
13292
+ }
13293
+ ],
13294
+ "attributes": [
13295
+ {
13296
+ "name": "announcement",
13297
+ "type": {
13298
+ "text": "string"
13299
+ },
13300
+ "default": "''",
13301
+ "description": "The announcement attribute is a string that is used to announce messages to the screen reader.\nThe announcement is made when the announcement attribute is set to a non-empty string.",
13302
+ "fieldName": "announcement"
13303
+ },
13304
+ {
13305
+ "name": "identity",
13306
+ "type": {
13307
+ "text": "string"
13308
+ },
13309
+ "default": "''",
13310
+ "description": "The id of the element in the light dom, to which announcement elements will be appended.\n\nIf id is not provided, it will be set to `mdc-screenreaderannouncer-identity` and\na div element with this id will be created in the light dom.",
13311
+ "fieldName": "identity"
13312
+ },
13313
+ {
13314
+ "name": "data-aria-live",
13315
+ "type": {
13316
+ "text": "AriaLive"
13317
+ },
13318
+ "description": "Aria live value for announcement.",
13319
+ "default": "'polite'",
13320
+ "fieldName": "dataAriaLive"
13321
+ },
13322
+ {
13323
+ "name": "delay",
13324
+ "type": {
13325
+ "text": "number"
13326
+ },
13327
+ "description": "Milliseconds to wait before adding the announcement to the identiy region in\nDOM, which will announce the message to the screen reader.",
13328
+ "default": "150",
13329
+ "fieldName": "delay"
13330
+ },
13331
+ {
13332
+ "name": "timeout",
13333
+ "type": {
13334
+ "text": "number"
13335
+ },
13336
+ "description": "Milliseconds to wait after which the announcement element will be removed from\nidentity region in DOM, causing the screen reader to not announcing the message.",
13337
+ "default": "20_000",
13338
+ "fieldName": "timeout"
13339
+ }
13340
+ ],
13341
+ "superclass": {
13342
+ "name": "Component",
13343
+ "module": "/src/models"
13344
+ },
13345
+ "tagName": "mdc-screenreaderannouncer",
13346
+ "jsDoc": "/**\n * `mdc-screenreaderannouncer` can be used to announce messages with the screen reader.\n *\n * To make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.\n *\n * **Internal logic**\n *\n * When the screenreader announcer is connected to the DOM, if the `identity` attribute is not\n * provided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created\n * in the DOM. If the `identity` attribute is provided, the identity element is used and no new element\n * is created in the DOM.\n *\n * When the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with\n * `aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.\n * After delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.\n *\n * The announcement `<div>` element is removed from the DOM after `timeout` milliseconds.\n *\n * When the screen announcer component is disconnected from the DOM, all the timeouts are cleared and\n * all the announcement elements added are removed from the DOM and timeouts cleared.\n *\n * **Note**\n * 1. The default delay of 150 miliseconds is used as we dynamically generate the\n * aria-live region in the DOM and add the announcement text to it.\n * 3. If no `identity` is provided, all the screen reader components will create and use only one\n * `<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.\n *\n * Reference: https://patrickhlauke.github.io/aria/tests/live-regions/\n *\n * @tagname mdc-screenreaderannouncer\n */",
13347
+ "customElement": true
13348
+ }
13349
+ ],
13350
+ "exports": [
13351
+ {
13352
+ "kind": "js",
13353
+ "name": "default",
13354
+ "declaration": {
13355
+ "name": "ScreenreaderAnnouncer",
13356
+ "module": "components/screenreaderannouncer/screenreaderannouncer.component.js"
13357
+ }
13358
+ }
13359
+ ]
13360
+ },
13182
13361
  {
13183
13362
  "kind": "javascript-module",
13184
13363
  "path": "components/searchfield/searchfield.component.js",