@momentum-design/components 0.64.0 → 0.64.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 (8) hide show
  1. package/dist/browser/index.js +1 -1
  2. package/dist/browser/index.js.map +2 -2
  3. package/dist/components/list/list.component.d.ts +4 -0
  4. package/dist/components/list/list.component.js +1 -1
  5. package/dist/custom-elements.json +1308 -1315
  6. package/dist/react/index.d.ts +3 -3
  7. package/dist/react/index.js +3 -3
  8. package/package.json +1 -1
package/dist/custom-elements.json CHANGED
@@ -4,480 +4,175 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "components/appheader/appheader.component.js",
8
- "declarations": [
9
- {
10
- "kind": "class",
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",
7
+ "path": "components/alertchip/alertchip.component.js",
69
8
  "declarations": [
70
9
  {
71
10
  "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",
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",
74
13
  "cssProperties": [
75
14
  {
76
- "description": "Allows customization of the default background color.",
77
- "name": "--mdc-avatar-default-background-color"
78
- },
79
- {
80
- "description": "Allows customization of the default foreground color.",
81
- "name": "--mdc-avatar-default-foreground-color"
15
+ "description": "The color of the label text",
16
+ "name": "--mdc-chip-color"
82
17
  },
83
18
  {
84
- "description": "Allows customization of the loading indicator background color.",
85
- "name": "--mdc-avatar-loading-indicator-background-color"
19
+ "description": "The color of the icon",
20
+ "name": "--mdc-chip-icon-color"
86
21
  },
87
22
  {
88
- "description": "Allows customization of the loading indicator foreground color.",
89
- "name": "--mdc-avatar-loading-indicator-foreground-color"
23
+ "description": "The border color of the alertchip",
24
+ "name": "--mdc-chip-border-color"
90
25
  },
91
26
  {
92
- "description": "Allows customization of the loading overlay background color.",
93
- "name": "--mdc-avatar-loading-overlay-background-color"
27
+ "description": "The background color of the alertchip",
28
+ "name": "--mdc-chip-background-color"
94
29
  }
95
30
  ],
96
31
  "members": [
97
32
  {
98
33
  "kind": "field",
99
- "name": "src",
34
+ "name": "variant",
100
35
  "type": {
101
- "text": "string | undefined"
36
+ "text": "VariantType"
102
37
  },
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
- }
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"
109
41
  },
110
42
  {
111
43
  "kind": "field",
112
- "name": "initials",
44
+ "name": "label",
113
45
  "type": {
114
- "text": "string | undefined"
46
+ "text": "string"
115
47
  },
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
- }
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"
122
51
  },
123
52
  {
124
53
  "kind": "field",
125
- "name": "presence",
54
+ "name": "tabIndex",
126
55
  "type": {
127
- "text": "PresenceType | undefined"
56
+ "text": "number"
128
57
  },
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",
58
+ "default": "0",
59
+ "description": "This property specifies the tab order of the element.",
60
+ "attribute": "tabIndex",
61
+ "reflects": true,
131
62
  "inheritedFrom": {
132
- "name": "AvatarComponentMixin",
133
- "module": "utils/mixins/AvatarComponentMixin.js"
63
+ "name": "TabIndexMixin",
64
+ "module": "utils/mixins/TabIndexMixin.js"
134
65
  }
135
66
  },
136
67
  {
137
68
  "kind": "field",
138
- "name": "size",
69
+ "name": "disabled",
139
70
  "type": {
140
- "text": "AvatarSize"
71
+ "text": "boolean | undefined"
141
72
  },
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",
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",
145
76
  "reflects": true,
146
77
  "inheritedFrom": {
147
- "name": "AvatarComponentMixin",
148
- "module": "utils/mixins/AvatarComponentMixin.js"
78
+ "name": "DisabledMixin",
79
+ "module": "utils/mixins/DisabledMixin.js"
149
80
  }
150
81
  },
151
82
  {
152
83
  "kind": "field",
153
- "name": "counter",
84
+ "name": "active",
154
85
  "type": {
155
- "text": "number | undefined"
86
+ "text": "boolean | undefined"
156
87
  },
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",
88
+ "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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
89
+ "default": "undefined",
90
+ "attribute": "active",
91
+ "reflects": true,
159
92
  "inheritedFrom": {
160
- "name": "AvatarComponentMixin",
161
- "module": "utils/mixins/AvatarComponentMixin.js"
93
+ "name": "Buttonsimple",
94
+ "module": "components/buttonsimple/buttonsimple.component.js"
162
95
  }
163
96
  },
164
97
  {
165
98
  "kind": "field",
166
- "name": "isTyping",
99
+ "name": "softDisabled",
167
100
  "type": {
168
- "text": "boolean"
101
+ "text": "boolean | undefined"
169
102
  },
170
- "default": "false",
171
- "description": "Represents the typing indicator when the user is typing.",
172
- "attribute": "is-typing",
103
+ "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.",
104
+ "default": "undefined",
105
+ "attribute": "soft-disabled",
106
+ "reflects": true,
173
107
  "inheritedFrom": {
174
- "name": "AvatarComponentMixin",
175
- "module": "utils/mixins/AvatarComponentMixin.js"
108
+ "name": "Buttonsimple",
109
+ "module": "components/buttonsimple/buttonsimple.component.js"
176
110
  }
177
111
  },
178
112
  {
179
113
  "kind": "field",
180
- "name": "iconName",
114
+ "name": "size",
181
115
  "type": {
182
- "text": "IconNames | undefined"
116
+ "text": "ButtonSize"
183
117
  },
184
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
185
- "attribute": "icon-name",
118
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
119
+ "default": "32",
120
+ "attribute": "size",
121
+ "reflects": true,
186
122
  "inheritedFrom": {
187
- "name": "IconNameMixin",
188
- "module": "utils/mixins/IconNameMixin.js"
123
+ "name": "Buttonsimple",
124
+ "module": "components/buttonsimple/buttonsimple.component.js"
189
125
  }
190
- }
191
- ],
192
- "mixins": [
193
- {
194
- "name": "AvatarComponentMixin",
195
- "module": "/src/utils/mixins/AvatarComponentMixin"
196
126
  },
197
127
  {
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": [
128
+ "kind": "field",
129
+ "name": "role",
130
+ "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.",
131
+ "default": "button",
132
+ "attribute": "role",
133
+ "reflects": true,
134
+ "inheritedFrom": {
135
+ "name": "Buttonsimple",
136
+ "module": "components/buttonsimple/buttonsimple.component.js"
137
+ }
138
+ },
210
139
  {
211
- "name": "src",
140
+ "kind": "field",
141
+ "name": "ariaStateKey",
212
142
  "type": {
213
143
  "text": "string | undefined"
214
144
  },
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",
145
+ "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
146
+ "default": "'aria-pressed' (when)",
147
+ "attribute": "ariaStateKey",
148
+ "reflects": true,
217
149
  "inheritedFrom": {
218
- "name": "AvatarComponentMixin",
219
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
150
+ "name": "Buttonsimple",
151
+ "module": "components/buttonsimple/buttonsimple.component.js"
220
152
  }
221
153
  },
222
154
  {
223
- "name": "initials",
155
+ "kind": "field",
156
+ "name": "type",
224
157
  "type": {
225
- "text": "string | undefined"
158
+ "text": "ButtonType"
226
159
  },
227
- "description": "The initials to be displayed for the avatar.",
228
- "fieldName": "initials",
160
+ "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.",
161
+ "default": "button",
162
+ "attribute": "type",
163
+ "reflects": true,
229
164
  "inheritedFrom": {
230
- "name": "AvatarComponentMixin",
231
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
165
+ "name": "Buttonsimple",
166
+ "module": "components/buttonsimple/buttonsimple.component.js"
232
167
  }
233
168
  },
234
169
  {
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",
170
+ "kind": "method",
171
+ "name": "executeAction",
172
+ "privacy": "protected",
241
173
  "inheritedFrom": {
242
- "name": "AvatarComponentMixin",
243
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
244
- }
245
- },
246
- {
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 | undefined"
392
- },
393
- "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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
394
- "default": "undefined",
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 | undefined"
407
- },
408
- "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.",
409
- "default": "undefined",
410
- "attribute": "soft-disabled",
411
- "reflects": true,
412
- "inheritedFrom": {
413
- "name": "Buttonsimple",
414
- "module": "components/buttonsimple/buttonsimple.component.js"
415
- }
416
- },
417
- {
418
- "kind": "field",
419
- "name": "size",
420
- "type": {
421
- "text": "ButtonSize"
422
- },
423
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
424
- "default": "32",
425
- "attribute": "size",
426
- "reflects": true,
427
- "inheritedFrom": {
428
- "name": "Buttonsimple",
429
- "module": "components/buttonsimple/buttonsimple.component.js"
430
- }
431
- },
432
- {
433
- "kind": "field",
434
- "name": "role",
435
- "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.",
436
- "default": "button",
437
- "attribute": "role",
438
- "reflects": true,
439
- "inheritedFrom": {
440
- "name": "Buttonsimple",
441
- "module": "components/buttonsimple/buttonsimple.component.js"
442
- }
443
- },
444
- {
445
- "kind": "field",
446
- "name": "ariaStateKey",
447
- "type": {
448
- "text": "string | undefined"
449
- },
450
- "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
451
- "default": "'aria-pressed' (when)",
452
- "attribute": "ariaStateKey",
453
- "reflects": true,
454
- "inheritedFrom": {
455
- "name": "Buttonsimple",
456
- "module": "components/buttonsimple/buttonsimple.component.js"
457
- }
458
- },
459
- {
460
- "kind": "field",
461
- "name": "type",
462
- "type": {
463
- "text": "ButtonType"
464
- },
465
- "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.",
466
- "default": "button",
467
- "attribute": "type",
468
- "reflects": true,
469
- "inheritedFrom": {
470
- "name": "Buttonsimple",
471
- "module": "components/buttonsimple/buttonsimple.component.js"
472
- }
473
- },
474
- {
475
- "kind": "method",
476
- "name": "executeAction",
477
- "privacy": "protected",
478
- "inheritedFrom": {
479
- "name": "Buttonsimple",
480
- "module": "components/buttonsimple/buttonsimple.component.js"
174
+ "name": "Buttonsimple",
175
+ "module": "components/buttonsimple/buttonsimple.component.js"
481
176
  }
482
177
  },
483
178
  {
@@ -799,50 +494,96 @@
799
494
  },
800
495
  {
801
496
  "kind": "javascript-module",
802
- "path": "components/avatarbutton/avatarbutton.component.js",
497
+ "path": "components/appheader/appheader.component.js",
803
498
  "declarations": [
804
499
  {
805
500
  "kind": "class",
806
- "description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.",
807
- "name": "AvatarButton",
808
- "cssProperties": [
501
+ "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**.",
502
+ "name": "Appheader",
503
+ "cssParts": [
809
504
  {
810
- "description": "Background color of the overlay in rest state",
811
- "name": "--mdc-avatarbutton-overlay-background-color-rest"
505
+ "description": "The main container for styling the header.",
506
+ "name": "container"
812
507
  },
813
508
  {
814
- "description": "Background color of the overlay in hover state",
815
- "name": "--mdc-avatarbutton-overlay-background-color-hover"
509
+ "description": "The leading section of the header.",
510
+ "name": "leading-section"
816
511
  },
817
512
  {
818
- "description": "Background color of the overlay in active state",
819
- "name": "--mdc-avatarbutton-overlay-background-color-active"
820
- }
821
- ],
822
- "members": [
513
+ "description": "The center section of the header.",
514
+ "name": "center-section"
515
+ },
823
516
  {
824
- "kind": "field",
825
- "name": "ariaLabel",
826
- "type": {
827
- "text": "string | null"
828
- },
829
- "default": "null",
830
- "description": "Aria-label attribute to be set for accessibility",
831
- "attribute": "aria-label"
517
+ "description": "The trailing section of the header.",
518
+ "name": "trailing-section"
519
+ }
520
+ ],
521
+ "slots": [
522
+ {
523
+ "description": "Slot for the leading section (e.g., brand logo, brand name).",
524
+ "name": "leading"
832
525
  },
833
526
  {
834
- "kind": "method",
835
- "name": "setSize",
836
- "privacy": "private",
837
- "parameters": [
838
- {
839
- "name": "size",
840
- "type": {
841
- "text": "AvatarSize"
842
- }
843
- }
844
- ]
527
+ "description": "Slot for the center section (e.g., search bar, icons).",
528
+ "name": "center"
529
+ },
530
+ {
531
+ "description": "Slot for the trailing section (e.g., profile avatar, icons).",
532
+ "name": "trailing"
533
+ }
534
+ ],
535
+ "members": [],
536
+ "superclass": {
537
+ "name": "Component",
538
+ "module": "/src/models"
539
+ },
540
+ "tagName": "mdc-appheader",
541
+ "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 */",
542
+ "customElement": true
543
+ }
544
+ ],
545
+ "exports": [
546
+ {
547
+ "kind": "js",
548
+ "name": "default",
549
+ "declaration": {
550
+ "name": "Appheader",
551
+ "module": "components/appheader/appheader.component.js"
552
+ }
553
+ }
554
+ ]
555
+ },
556
+ {
557
+ "kind": "javascript-module",
558
+ "path": "components/avatar/avatar.component.js",
559
+ "declarations": [
560
+ {
561
+ "kind": "class",
562
+ "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.",
563
+ "name": "Avatar",
564
+ "cssProperties": [
565
+ {
566
+ "description": "Allows customization of the default background color.",
567
+ "name": "--mdc-avatar-default-background-color"
568
+ },
569
+ {
570
+ "description": "Allows customization of the default foreground color.",
571
+ "name": "--mdc-avatar-default-foreground-color"
572
+ },
573
+ {
574
+ "description": "Allows customization of the loading indicator background color.",
575
+ "name": "--mdc-avatar-loading-indicator-background-color"
576
+ },
577
+ {
578
+ "description": "Allows customization of the loading indicator foreground color.",
579
+ "name": "--mdc-avatar-loading-indicator-foreground-color"
845
580
  },
581
+ {
582
+ "description": "Allows customization of the loading overlay background color.",
583
+ "name": "--mdc-avatar-loading-overlay-background-color"
584
+ }
585
+ ],
586
+ "members": [
846
587
  {
847
588
  "kind": "field",
848
589
  "name": "src",
@@ -886,15 +627,15 @@
886
627
  "kind": "field",
887
628
  "name": "size",
888
629
  "type": {
889
- "text": "ButtonSize"
630
+ "text": "AvatarSize"
890
631
  },
891
632
  "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
892
633
  "default": "32",
893
634
  "attribute": "size",
894
635
  "reflects": true,
895
636
  "inheritedFrom": {
896
- "name": "Buttonsimple",
897
- "module": "components/buttonsimple/buttonsimple.component.js"
637
+ "name": "AvatarComponentMixin",
638
+ "module": "utils/mixins/AvatarComponentMixin.js"
898
639
  }
899
640
  },
900
641
  {
@@ -936,117 +677,376 @@
936
677
  "name": "IconNameMixin",
937
678
  "module": "utils/mixins/IconNameMixin.js"
938
679
  }
680
+ }
681
+ ],
682
+ "mixins": [
683
+ {
684
+ "name": "AvatarComponentMixin",
685
+ "module": "/src/utils/mixins/AvatarComponentMixin"
939
686
  },
940
687
  {
941
- "kind": "field",
942
- "name": "tabIndex",
688
+ "name": "IconNameMixin",
689
+ "module": "/src/utils/mixins/IconNameMixin"
690
+ }
691
+ ],
692
+ "superclass": {
693
+ "name": "Component",
694
+ "module": "/src/models"
695
+ },
696
+ "tagName": "mdc-avatar",
697
+ "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 */",
698
+ "customElement": true,
699
+ "attributes": [
700
+ {
701
+ "name": "src",
943
702
  "type": {
944
- "text": "number"
703
+ "text": "string | undefined"
945
704
  },
946
- "default": "0",
947
- "description": "This property specifies the tab order of the element.",
948
- "attribute": "tabIndex",
949
- "reflects": true,
705
+ "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.",
706
+ "fieldName": "src",
950
707
  "inheritedFrom": {
951
- "name": "TabIndexMixin",
952
- "module": "utils/mixins/TabIndexMixin.js"
708
+ "name": "AvatarComponentMixin",
709
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
953
710
  }
954
711
  },
955
712
  {
956
- "kind": "field",
957
- "name": "disabled",
713
+ "name": "initials",
958
714
  "type": {
959
- "text": "boolean | undefined"
715
+ "text": "string | undefined"
960
716
  },
961
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
962
- "default": "undefined",
963
- "attribute": "disabled",
964
- "reflects": true,
717
+ "description": "The initials to be displayed for the avatar.",
718
+ "fieldName": "initials",
965
719
  "inheritedFrom": {
966
- "name": "DisabledMixin",
967
- "module": "utils/mixins/DisabledMixin.js"
720
+ "name": "AvatarComponentMixin",
721
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
968
722
  }
969
723
  },
970
724
  {
971
- "kind": "field",
972
- "name": "active",
725
+ "name": "presence",
973
726
  "type": {
974
- "text": "boolean | undefined"
727
+ "text": "PresenceType | undefined"
975
728
  },
976
- "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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
977
- "default": "undefined",
978
- "attribute": "active",
979
- "reflects": true,
729
+ "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`",
730
+ "fieldName": "presence",
980
731
  "inheritedFrom": {
981
- "name": "Buttonsimple",
982
- "module": "components/buttonsimple/buttonsimple.component.js"
732
+ "name": "AvatarComponentMixin",
733
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
983
734
  }
984
735
  },
985
736
  {
986
- "kind": "field",
987
- "name": "softDisabled",
737
+ "name": "size",
988
738
  "type": {
989
- "text": "boolean | undefined"
739
+ "text": "AvatarSize"
990
740
  },
991
- "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.",
992
- "default": "undefined",
993
- "attribute": "soft-disabled",
994
- "reflects": true,
741
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
742
+ "default": "32",
743
+ "fieldName": "size",
995
744
  "inheritedFrom": {
996
- "name": "Buttonsimple",
997
- "module": "components/buttonsimple/buttonsimple.component.js"
745
+ "name": "AvatarComponentMixin",
746
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
998
747
  }
999
748
  },
1000
749
  {
1001
- "kind": "field",
1002
- "name": "role",
1003
- "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.",
1004
- "default": "button",
1005
- "attribute": "role",
1006
- "reflects": true,
750
+ "name": "counter",
751
+ "type": {
752
+ "text": "number | undefined"
753
+ },
754
+ "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`.",
755
+ "fieldName": "counter",
1007
756
  "inheritedFrom": {
1008
- "name": "Buttonsimple",
1009
- "module": "components/buttonsimple/buttonsimple.component.js"
757
+ "name": "AvatarComponentMixin",
758
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1010
759
  }
1011
760
  },
1012
761
  {
1013
- "kind": "field",
1014
- "name": "ariaStateKey",
762
+ "name": "is-typing",
1015
763
  "type": {
1016
- "text": "string | undefined"
764
+ "text": "boolean"
1017
765
  },
1018
- "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
1019
- "default": "'aria-pressed' (when)",
1020
- "attribute": "ariaStateKey",
1021
- "reflects": true,
766
+ "default": "false",
767
+ "description": "Represents the typing indicator when the user is typing.",
768
+ "fieldName": "isTyping",
1022
769
  "inheritedFrom": {
1023
- "name": "Buttonsimple",
1024
- "module": "components/buttonsimple/buttonsimple.component.js"
770
+ "name": "AvatarComponentMixin",
771
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
1025
772
  }
1026
773
  },
1027
774
  {
1028
- "kind": "field",
1029
- "name": "type",
775
+ "name": "icon-name",
1030
776
  "type": {
1031
- "text": "ButtonType"
777
+ "text": "IconNames | undefined"
1032
778
  },
1033
- "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.",
1034
- "default": "button",
1035
- "attribute": "type",
1036
- "reflects": true,
779
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
780
+ "fieldName": "iconName",
1037
781
  "inheritedFrom": {
1038
- "name": "Buttonsimple",
1039
- "module": "components/buttonsimple/buttonsimple.component.js"
782
+ "name": "IconNameMixin",
783
+ "module": "src/utils/mixins/IconNameMixin.ts"
1040
784
  }
1041
- },
785
+ }
786
+ ]
787
+ }
788
+ ],
789
+ "exports": [
790
+ {
791
+ "kind": "js",
792
+ "name": "default",
793
+ "declaration": {
794
+ "name": "Avatar",
795
+ "module": "components/avatar/avatar.component.js"
796
+ }
797
+ }
798
+ ]
799
+ },
800
+ {
801
+ "kind": "javascript-module",
802
+ "path": "components/avatarbutton/avatarbutton.component.js",
803
+ "declarations": [
804
+ {
805
+ "kind": "class",
806
+ "description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.",
807
+ "name": "AvatarButton",
808
+ "cssProperties": [
1042
809
  {
1043
- "kind": "method",
1044
- "name": "executeAction",
1045
- "privacy": "protected",
1046
- "inheritedFrom": {
1047
- "name": "Buttonsimple",
1048
- "module": "components/buttonsimple/buttonsimple.component.js"
1049
- }
810
+ "description": "Background color of the overlay in rest state",
811
+ "name": "--mdc-avatarbutton-overlay-background-color-rest"
812
+ },
813
+ {
814
+ "description": "Background color of the overlay in hover state",
815
+ "name": "--mdc-avatarbutton-overlay-background-color-hover"
816
+ },
817
+ {
818
+ "description": "Background color of the overlay in active state",
819
+ "name": "--mdc-avatarbutton-overlay-background-color-active"
820
+ }
821
+ ],
822
+ "members": [
823
+ {
824
+ "kind": "field",
825
+ "name": "ariaLabel",
826
+ "type": {
827
+ "text": "string | null"
828
+ },
829
+ "default": "null",
830
+ "description": "Aria-label attribute to be set for accessibility",
831
+ "attribute": "aria-label"
832
+ },
833
+ {
834
+ "kind": "method",
835
+ "name": "setSize",
836
+ "privacy": "private",
837
+ "parameters": [
838
+ {
839
+ "name": "size",
840
+ "type": {
841
+ "text": "AvatarSize"
842
+ }
843
+ }
844
+ ]
845
+ },
846
+ {
847
+ "kind": "field",
848
+ "name": "src",
849
+ "type": {
850
+ "text": "string | undefined"
851
+ },
852
+ "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.",
853
+ "attribute": "src",
854
+ "inheritedFrom": {
855
+ "name": "AvatarComponentMixin",
856
+ "module": "utils/mixins/AvatarComponentMixin.js"
857
+ }
858
+ },
859
+ {
860
+ "kind": "field",
861
+ "name": "initials",
862
+ "type": {
863
+ "text": "string | undefined"
864
+ },
865
+ "description": "The initials to be displayed for the avatar.",
866
+ "attribute": "initials",
867
+ "inheritedFrom": {
868
+ "name": "AvatarComponentMixin",
869
+ "module": "utils/mixins/AvatarComponentMixin.js"
870
+ }
871
+ },
872
+ {
873
+ "kind": "field",
874
+ "name": "presence",
875
+ "type": {
876
+ "text": "PresenceType | undefined"
877
+ },
878
+ "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`",
879
+ "attribute": "presence",
880
+ "inheritedFrom": {
881
+ "name": "AvatarComponentMixin",
882
+ "module": "utils/mixins/AvatarComponentMixin.js"
883
+ }
884
+ },
885
+ {
886
+ "kind": "field",
887
+ "name": "size",
888
+ "type": {
889
+ "text": "ButtonSize"
890
+ },
891
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
892
+ "default": "32",
893
+ "attribute": "size",
894
+ "reflects": true,
895
+ "inheritedFrom": {
896
+ "name": "Buttonsimple",
897
+ "module": "components/buttonsimple/buttonsimple.component.js"
898
+ }
899
+ },
900
+ {
901
+ "kind": "field",
902
+ "name": "counter",
903
+ "type": {
904
+ "text": "number | undefined"
905
+ },
906
+ "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`.",
907
+ "attribute": "counter",
908
+ "inheritedFrom": {
909
+ "name": "AvatarComponentMixin",
910
+ "module": "utils/mixins/AvatarComponentMixin.js"
911
+ }
912
+ },
913
+ {
914
+ "kind": "field",
915
+ "name": "isTyping",
916
+ "type": {
917
+ "text": "boolean"
918
+ },
919
+ "default": "false",
920
+ "description": "Represents the typing indicator when the user is typing.",
921
+ "attribute": "is-typing",
922
+ "inheritedFrom": {
923
+ "name": "AvatarComponentMixin",
924
+ "module": "utils/mixins/AvatarComponentMixin.js"
925
+ }
926
+ },
927
+ {
928
+ "kind": "field",
929
+ "name": "iconName",
930
+ "type": {
931
+ "text": "IconNames | undefined"
932
+ },
933
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
934
+ "attribute": "icon-name",
935
+ "inheritedFrom": {
936
+ "name": "IconNameMixin",
937
+ "module": "utils/mixins/IconNameMixin.js"
938
+ }
939
+ },
940
+ {
941
+ "kind": "field",
942
+ "name": "tabIndex",
943
+ "type": {
944
+ "text": "number"
945
+ },
946
+ "default": "0",
947
+ "description": "This property specifies the tab order of the element.",
948
+ "attribute": "tabIndex",
949
+ "reflects": true,
950
+ "inheritedFrom": {
951
+ "name": "TabIndexMixin",
952
+ "module": "utils/mixins/TabIndexMixin.js"
953
+ }
954
+ },
955
+ {
956
+ "kind": "field",
957
+ "name": "disabled",
958
+ "type": {
959
+ "text": "boolean | undefined"
960
+ },
961
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
962
+ "default": "undefined",
963
+ "attribute": "disabled",
964
+ "reflects": true,
965
+ "inheritedFrom": {
966
+ "name": "DisabledMixin",
967
+ "module": "utils/mixins/DisabledMixin.js"
968
+ }
969
+ },
970
+ {
971
+ "kind": "field",
972
+ "name": "active",
973
+ "type": {
974
+ "text": "boolean | undefined"
975
+ },
976
+ "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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
977
+ "default": "undefined",
978
+ "attribute": "active",
979
+ "reflects": true,
980
+ "inheritedFrom": {
981
+ "name": "Buttonsimple",
982
+ "module": "components/buttonsimple/buttonsimple.component.js"
983
+ }
984
+ },
985
+ {
986
+ "kind": "field",
987
+ "name": "softDisabled",
988
+ "type": {
989
+ "text": "boolean | undefined"
990
+ },
991
+ "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.",
992
+ "default": "undefined",
993
+ "attribute": "soft-disabled",
994
+ "reflects": true,
995
+ "inheritedFrom": {
996
+ "name": "Buttonsimple",
997
+ "module": "components/buttonsimple/buttonsimple.component.js"
998
+ }
999
+ },
1000
+ {
1001
+ "kind": "field",
1002
+ "name": "role",
1003
+ "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.",
1004
+ "default": "button",
1005
+ "attribute": "role",
1006
+ "reflects": true,
1007
+ "inheritedFrom": {
1008
+ "name": "Buttonsimple",
1009
+ "module": "components/buttonsimple/buttonsimple.component.js"
1010
+ }
1011
+ },
1012
+ {
1013
+ "kind": "field",
1014
+ "name": "ariaStateKey",
1015
+ "type": {
1016
+ "text": "string | undefined"
1017
+ },
1018
+ "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
1019
+ "default": "'aria-pressed' (when)",
1020
+ "attribute": "ariaStateKey",
1021
+ "reflects": true,
1022
+ "inheritedFrom": {
1023
+ "name": "Buttonsimple",
1024
+ "module": "components/buttonsimple/buttonsimple.component.js"
1025
+ }
1026
+ },
1027
+ {
1028
+ "kind": "field",
1029
+ "name": "type",
1030
+ "type": {
1031
+ "text": "ButtonType"
1032
+ },
1033
+ "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.",
1034
+ "default": "button",
1035
+ "attribute": "type",
1036
+ "reflects": true,
1037
+ "inheritedFrom": {
1038
+ "name": "Buttonsimple",
1039
+ "module": "components/buttonsimple/buttonsimple.component.js"
1040
+ }
1041
+ },
1042
+ {
1043
+ "kind": "method",
1044
+ "name": "executeAction",
1045
+ "privacy": "protected",
1046
+ "inheritedFrom": {
1047
+ "name": "Buttonsimple",
1048
+ "module": "components/buttonsimple/buttonsimple.component.js"
1049
+ }
1050
1050
  },
1051
1051
  {
1052
1052
  "kind": "method",
@@ -2600,22 +2600,22 @@
2600
2600
  },
2601
2601
  {
2602
2602
  "kind": "javascript-module",
2603
- "path": "components/buttonlink/buttonlink.component.js",
2603
+ "path": "components/buttonsimple/buttonsimple.component.js",
2604
2604
  "declarations": [
2605
2605
  {
2606
2606
  "kind": "class",
2607
- "description": "`mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\nfeatures of `mdc-button`. This includes support for variants, sizing, and optional\nprefix and postfix icons via slots.\n\n### Features:\n- Behaves like an link while visually resembling a button.\n- Supports slots for `prefix-icon` and `postfix-icon`.\n- Customizable size, color, and variant through attributes.\n- Inherits accessibility and keyboard interaction support from `mdc-linksimple`.",
2608
- "name": "ButtonLink",
2607
+ "description": "`mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\nIt is used as an internal component and is not intended to be used directly by consumers.\nConsumers should use the `mdc-button` component instead.",
2608
+ "name": "Buttonsimple",
2609
2609
  "members": [
2610
2610
  {
2611
2611
  "kind": "field",
2612
- "name": "size",
2612
+ "name": "active",
2613
2613
  "type": {
2614
- "text": "PillButtonSize | IconButtonSize"
2614
+ "text": "boolean | undefined"
2615
2615
  },
2616
- "description": "ButtonLink sizing is based on the buttonlink type.\n - **Pill buttonlink**: 40, 32, 28, 24.\n - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.\n - Tertiary icon buttonlink can also be 20.",
2617
- "default": "32",
2618
- "attribute": "size",
2616
+ "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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
2617
+ "default": "undefined",
2618
+ "attribute": "active",
2619
2619
  "reflects": true
2620
2620
  },
2621
2621
  {
@@ -2624,173 +2624,165 @@
2624
2624
  "type": {
2625
2625
  "text": "boolean | undefined"
2626
2626
  },
2627
- "description": "Indicates whether the buttonlink is soft disabled.\nWhen set to `true`, the buttonlink 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 buttonlink behaves like a disabled buttonlink, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
2627
+ "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.",
2628
2628
  "default": "undefined",
2629
2629
  "attribute": "soft-disabled",
2630
2630
  "reflects": true
2631
2631
  },
2632
- {
2633
- "kind": "method",
2634
- "name": "setSoftDisabled",
2635
- "privacy": "private",
2636
- "parameters": [
2637
- {
2638
- "name": "element",
2639
- "type": {
2640
- "text": "HTMLElement"
2641
- },
2642
- "description": "The buttonlink element."
2643
- },
2644
- {
2645
- "name": "softDisabled",
2646
- "optional": true,
2647
- "type": {
2648
- "text": "boolean"
2649
- },
2650
- "description": "The soft-disabled state."
2651
- }
2652
- ],
2653
- "description": "Sets the soft-disabled attribute for the buttonlink.\nWhen soft-disabled, the buttonlink looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute."
2654
- },
2655
2632
  {
2656
2633
  "kind": "field",
2657
- "name": "prefixIcon",
2634
+ "name": "size",
2658
2635
  "type": {
2659
- "text": "IconNames | undefined"
2636
+ "text": "ButtonSize"
2660
2637
  },
2661
- "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
2662
- "attribute": "prefix-icon",
2663
- "reflects": true,
2664
- "inheritedFrom": {
2665
- "name": "ButtonComponentMixin",
2666
- "module": "utils/mixins/ButtonComponentMixin.js"
2667
- }
2638
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
2639
+ "default": "32",
2640
+ "attribute": "size",
2641
+ "reflects": true
2668
2642
  },
2669
2643
  {
2670
2644
  "kind": "field",
2671
- "name": "postfixIcon",
2672
- "type": {
2673
- "text": "IconNames | undefined"
2674
- },
2675
- "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
2676
- "attribute": "postfix-icon",
2677
- "reflects": true,
2678
- "inheritedFrom": {
2679
- "name": "ButtonComponentMixin",
2680
- "module": "utils/mixins/ButtonComponentMixin.js"
2681
- }
2645
+ "name": "role",
2646
+ "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.",
2647
+ "default": "button",
2648
+ "attribute": "role",
2649
+ "reflects": true
2682
2650
  },
2683
2651
  {
2684
2652
  "kind": "field",
2685
- "name": "variant",
2653
+ "name": "ariaStateKey",
2686
2654
  "type": {
2687
- "text": "ButtonVariant"
2655
+ "text": "string | undefined"
2688
2656
  },
2689
- "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.",
2690
- "default": "primary",
2691
- "attribute": "variant",
2692
- "inheritedFrom": {
2693
- "name": "ButtonComponentMixin",
2694
- "module": "utils/mixins/ButtonComponentMixin.js"
2695
- }
2657
+ "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
2658
+ "default": "'aria-pressed' (when)",
2659
+ "attribute": "ariaStateKey",
2660
+ "reflects": true
2696
2661
  },
2697
2662
  {
2698
2663
  "kind": "field",
2699
- "name": "color",
2664
+ "name": "type",
2700
2665
  "type": {
2701
- "text": "ButtonColor"
2666
+ "text": "ButtonType"
2702
2667
  },
2703
- "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
2704
- "default": "default",
2705
- "attribute": "color",
2706
- "inheritedFrom": {
2707
- "name": "ButtonComponentMixin",
2708
- "module": "utils/mixins/ButtonComponentMixin.js"
2709
- }
2668
+ "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.",
2669
+ "default": "button",
2670
+ "attribute": "type",
2671
+ "reflects": true
2710
2672
  },
2711
2673
  {
2712
2674
  "kind": "method",
2713
- "name": "setVariant",
2675
+ "name": "executeAction",
2676
+ "privacy": "protected"
2677
+ },
2678
+ {
2679
+ "kind": "method",
2680
+ "name": "setActive",
2681
+ "privacy": "protected",
2714
2682
  "parameters": [
2715
2683
  {
2716
- "name": "variant",
2684
+ "name": "element",
2717
2685
  "type": {
2718
- "text": "ButtonVariant"
2686
+ "text": "HTMLElement"
2719
2687
  },
2720
- "description": "The variant to set."
2688
+ "description": "The button element"
2689
+ },
2690
+ {
2691
+ "name": "active",
2692
+ "optional": true,
2693
+ "type": {
2694
+ "text": "boolean"
2695
+ },
2696
+ "description": "The active state of the element"
2721
2697
  }
2722
2698
  ],
2723
- "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.",
2724
- "inheritedFrom": {
2725
- "name": "ButtonComponentMixin",
2726
- "module": "utils/mixins/ButtonComponentMixin.js"
2727
- }
2699
+ "description": "Sets the ariaStateKey attributes based on the active state of the button."
2728
2700
  },
2729
2701
  {
2730
2702
  "kind": "method",
2731
- "name": "setColor",
2703
+ "name": "setSoftDisabled",
2704
+ "privacy": "private",
2732
2705
  "parameters": [
2733
2706
  {
2734
- "name": "color",
2707
+ "name": "element",
2735
2708
  "type": {
2736
- "text": "ButtonColor"
2709
+ "text": "HTMLElement"
2737
2710
  },
2738
- "description": "The color to set."
2711
+ "description": "The button element."
2712
+ },
2713
+ {
2714
+ "name": "softDisabled",
2715
+ "optional": true,
2716
+ "type": {
2717
+ "text": "boolean"
2718
+ },
2719
+ "description": "The soft-disabled state."
2739
2720
  }
2740
2721
  ],
2741
- "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary button.",
2742
- "inheritedFrom": {
2743
- "name": "ButtonComponentMixin",
2744
- "module": "utils/mixins/ButtonComponentMixin.js"
2745
- }
2722
+ "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."
2746
2723
  },
2747
2724
  {
2748
2725
  "kind": "method",
2749
- "name": "setSize",
2726
+ "name": "setDisabled",
2727
+ "privacy": "private",
2750
2728
  "parameters": [
2751
2729
  {
2752
- "name": "size",
2730
+ "name": "element",
2753
2731
  "type": {
2754
- "text": "PillButtonSize | IconButtonSize"
2732
+ "text": "HTMLElement"
2755
2733
  },
2756
- "description": "The size to set."
2734
+ "description": "The button element."
2735
+ },
2736
+ {
2737
+ "name": "disabled",
2738
+ "type": {
2739
+ "text": "boolean"
2740
+ },
2741
+ "description": "The disabled state."
2757
2742
  }
2758
2743
  ],
2759
- "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.",
2760
- "inheritedFrom": {
2761
- "name": "ButtonComponentMixin",
2762
- "module": "utils/mixins/ButtonComponentMixin.js"
2763
- }
2744
+ "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."
2764
2745
  },
2765
2746
  {
2766
2747
  "kind": "method",
2767
- "name": "inferButtonType",
2768
- "description": "Infers the type of button based on the presence of slot and/or prefix and postfix icons.",
2748
+ "name": "triggerClickEvent",
2749
+ "privacy": "private"
2750
+ },
2751
+ {
2752
+ "kind": "method",
2753
+ "name": "handleBlur",
2754
+ "privacy": "private",
2755
+ "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed."
2756
+ },
2757
+ {
2758
+ "kind": "method",
2759
+ "name": "handleKeyDown",
2760
+ "privacy": "private",
2769
2761
  "parameters": [
2770
2762
  {
2771
- "description": "default slot of button",
2772
- "name": "slot"
2763
+ "name": "event",
2764
+ "type": {
2765
+ "text": "KeyboardEvent"
2766
+ },
2767
+ "description": "The keyboard event."
2773
2768
  }
2774
2769
  ],
2775
- "inheritedFrom": {
2776
- "name": "ButtonComponentMixin",
2777
- "module": "utils/mixins/ButtonComponentMixin.js"
2778
- }
2770
+ "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.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application."
2779
2771
  },
2780
2772
  {
2781
- "kind": "field",
2782
- "name": "disabled",
2783
- "type": {
2784
- "text": "boolean | undefined"
2785
- },
2786
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
2787
- "default": "undefined",
2788
- "attribute": "disabled",
2789
- "reflects": true,
2790
- "inheritedFrom": {
2791
- "name": "DisabledMixin",
2792
- "module": "utils/mixins/DisabledMixin.js"
2793
- }
2773
+ "kind": "method",
2774
+ "name": "handleKeyUp",
2775
+ "privacy": "private",
2776
+ "parameters": [
2777
+ {
2778
+ "name": "event",
2779
+ "type": {
2780
+ "text": "KeyboardEvent"
2781
+ },
2782
+ "description": "The keyboard event."
2783
+ }
2784
+ ],
2785
+ "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."
2794
2786
  },
2795
2787
  {
2796
2788
  "kind": "field",
@@ -2809,740 +2801,748 @@
2809
2801
  },
2810
2802
  {
2811
2803
  "kind": "field",
2812
- "name": "inline",
2804
+ "name": "disabled",
2813
2805
  "type": {
2814
- "text": "boolean"
2806
+ "text": "boolean | undefined"
2815
2807
  },
2816
- "description": "The link can be inline or standalone.",
2817
- "default": "false",
2818
- "attribute": "inline",
2808
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
2809
+ "default": "undefined",
2810
+ "attribute": "disabled",
2819
2811
  "reflects": true,
2820
2812
  "inheritedFrom": {
2821
- "name": "Linksimple",
2822
- "module": "components/linksimple/linksimple.component.js"
2813
+ "name": "DisabledMixin",
2814
+ "module": "utils/mixins/DisabledMixin.js"
2823
2815
  }
2816
+ }
2817
+ ],
2818
+ "events": [
2819
+ {
2820
+ "description": "(React: onClick) This event is dispatched when the button is clicked.",
2821
+ "name": "click",
2822
+ "reactName": "onClick"
2824
2823
  },
2825
2824
  {
2826
- "kind": "field",
2827
- "name": "inverted",
2828
- "type": {
2829
- "text": "boolean"
2830
- },
2831
- "description": "The link color can be inverted by setting the inverted attribute to true.",
2832
- "default": "false",
2833
- "attribute": "inverted",
2834
- "reflects": true,
2835
- "inheritedFrom": {
2836
- "name": "Linksimple",
2837
- "module": "components/linksimple/linksimple.component.js"
2838
- }
2825
+ "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
2826
+ "name": "keydown",
2827
+ "reactName": "onKeyDown"
2839
2828
  },
2840
2829
  {
2841
- "kind": "field",
2842
- "name": "href",
2843
- "type": {
2844
- "text": "string"
2845
- },
2846
- "default": "'#'",
2847
- "description": "Href for navigation. The URL that the hyperlink points to",
2848
- "attribute": "href",
2849
- "reflects": true,
2850
- "inheritedFrom": {
2851
- "name": "Linksimple",
2852
- "module": "components/linksimple/linksimple.component.js"
2853
- }
2830
+ "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
2831
+ "name": "keyup",
2832
+ "reactName": "onKeyUp"
2854
2833
  },
2855
2834
  {
2856
- "kind": "field",
2857
- "name": "target",
2835
+ "description": "(React: onFocus) This event is dispatched when the button receives focus.",
2836
+ "name": "focus",
2837
+ "reactName": "onFocus"
2838
+ }
2839
+ ],
2840
+ "attributes": [
2841
+ {
2842
+ "name": "active",
2858
2843
  "type": {
2859
- "text": "string"
2844
+ "text": "boolean | undefined"
2860
2845
  },
2861
- "default": "'_self'",
2862
- "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
2863
- "attribute": "target",
2864
- "reflects": true,
2865
- "inheritedFrom": {
2866
- "name": "Linksimple",
2867
- "module": "components/linksimple/linksimple.component.js"
2868
- }
2846
+ "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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
2847
+ "default": "undefined",
2848
+ "fieldName": "active"
2869
2849
  },
2870
2850
  {
2871
- "kind": "field",
2872
- "name": "rel",
2851
+ "name": "soft-disabled",
2873
2852
  "type": {
2874
- "text": "string | undefined"
2853
+ "text": "boolean | undefined"
2875
2854
  },
2876
- "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
2877
- "attribute": "rel",
2878
- "reflects": true,
2879
- "inheritedFrom": {
2880
- "name": "Linksimple",
2881
- "module": "components/linksimple/linksimple.component.js"
2882
- }
2855
+ "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.",
2856
+ "default": "undefined",
2857
+ "fieldName": "softDisabled"
2883
2858
  },
2884
2859
  {
2885
- "kind": "field",
2886
- "name": "handleNavigation",
2887
- "privacy": "private",
2888
- "inheritedFrom": {
2889
- "name": "Linksimple",
2890
- "module": "components/linksimple/linksimple.component.js"
2891
- }
2860
+ "name": "size",
2861
+ "type": {
2862
+ "text": "ButtonSize"
2863
+ },
2864
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
2865
+ "default": "32",
2866
+ "fieldName": "size"
2892
2867
  },
2893
2868
  {
2894
- "kind": "method",
2895
- "name": "setDisabled",
2896
- "privacy": "private",
2897
- "parameters": [
2898
- {
2899
- "name": "disabled",
2900
- "type": {
2901
- "text": "boolean"
2902
- },
2903
- "description": "Whether the element should be disabled"
2904
- }
2905
- ],
2906
- "description": "Sets or removes `aria-disabled` and updates `tabIndex` to reflect\nthe disabled state. When disabled, the element becomes unfocusable;\nwhen enabled, the previous `tabIndex` is restored.",
2907
- "inheritedFrom": {
2908
- "name": "Linksimple",
2909
- "module": "components/linksimple/linksimple.component.js"
2910
- }
2911
- }
2912
- ],
2913
- "events": [
2869
+ "name": "role",
2870
+ "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.",
2871
+ "default": "button",
2872
+ "fieldName": "role"
2873
+ },
2914
2874
  {
2915
- "description": "(React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.",
2916
- "name": "click",
2917
- "reactName": "onClick",
2918
- "inheritedFrom": {
2919
- "name": "Linksimple",
2920
- "module": "src/components/linksimple/linksimple.component.ts"
2921
- }
2875
+ "name": "ariaStateKey",
2876
+ "type": {
2877
+ "text": "string | undefined"
2878
+ },
2879
+ "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
2880
+ "default": "'aria-pressed' (when)",
2881
+ "fieldName": "ariaStateKey"
2922
2882
  },
2923
2883
  {
2924
- "description": "(React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.",
2925
- "name": "keydown",
2926
- "reactName": "onKeyDown",
2927
- "inheritedFrom": {
2928
- "name": "Linksimple",
2929
- "module": "src/components/linksimple/linksimple.component.ts"
2930
- }
2884
+ "name": "type",
2885
+ "type": {
2886
+ "text": "ButtonType"
2887
+ },
2888
+ "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.",
2889
+ "default": "button",
2890
+ "fieldName": "type"
2931
2891
  },
2932
2892
  {
2933
- "description": "(React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.",
2934
- "name": "focus",
2935
- "reactName": "onFocus",
2893
+ "name": "tabIndex",
2894
+ "type": {
2895
+ "text": "number"
2896
+ },
2897
+ "default": "0",
2898
+ "description": "This property specifies the tab order of the element.",
2899
+ "fieldName": "tabIndex",
2936
2900
  "inheritedFrom": {
2937
- "name": "Linksimple",
2938
- "module": "src/components/linksimple/linksimple.component.ts"
2901
+ "name": "TabIndexMixin",
2902
+ "module": "src/utils/mixins/TabIndexMixin.ts"
2939
2903
  }
2940
2904
  },
2941
2905
  {
2942
- "description": "(React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.",
2943
- "name": "blur",
2944
- "reactName": "onBlur",
2906
+ "name": "disabled",
2907
+ "type": {
2908
+ "text": "boolean | undefined"
2909
+ },
2910
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
2911
+ "default": "undefined",
2912
+ "fieldName": "disabled",
2945
2913
  "inheritedFrom": {
2946
- "name": "Linksimple",
2947
- "module": "src/components/linksimple/linksimple.component.ts"
2914
+ "name": "DisabledMixin",
2915
+ "module": "src/utils/mixins/DisabledMixin.ts"
2948
2916
  }
2949
2917
  }
2950
2918
  ],
2951
- "attributes": [
2919
+ "mixins": [
2920
+ {
2921
+ "name": "TabIndexMixin",
2922
+ "module": "/src/utils/mixins/TabIndexMixin"
2923
+ },
2924
+ {
2925
+ "name": "DisabledMixin",
2926
+ "module": "/src/utils/mixins/DisabledMixin"
2927
+ }
2928
+ ],
2929
+ "superclass": {
2930
+ "name": "Component",
2931
+ "module": "/src/models"
2932
+ },
2933
+ "tagName": "mdc-buttonsimple",
2934
+ "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 */",
2935
+ "customElement": true
2936
+ }
2937
+ ],
2938
+ "exports": [
2939
+ {
2940
+ "kind": "js",
2941
+ "name": "default",
2942
+ "declaration": {
2943
+ "name": "Buttonsimple",
2944
+ "module": "components/buttonsimple/buttonsimple.component.js"
2945
+ }
2946
+ }
2947
+ ]
2948
+ },
2949
+ {
2950
+ "kind": "javascript-module",
2951
+ "path": "components/buttonlink/buttonlink.component.js",
2952
+ "declarations": [
2953
+ {
2954
+ "kind": "class",
2955
+ "description": "`mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\nfeatures of `mdc-button`. This includes support for variants, sizing, and optional\nprefix and postfix icons via slots.\n\n### Features:\n- Behaves like an link while visually resembling a button.\n- Supports slots for `prefix-icon` and `postfix-icon`.\n- Customizable size, color, and variant through attributes.\n- Inherits accessibility and keyboard interaction support from `mdc-linksimple`.",
2956
+ "name": "ButtonLink",
2957
+ "members": [
2952
2958
  {
2959
+ "kind": "field",
2953
2960
  "name": "size",
2954
2961
  "type": {
2955
2962
  "text": "PillButtonSize | IconButtonSize"
2956
2963
  },
2957
2964
  "description": "ButtonLink sizing is based on the buttonlink type.\n - **Pill buttonlink**: 40, 32, 28, 24.\n - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.\n - Tertiary icon buttonlink can also be 20.",
2958
2965
  "default": "32",
2959
- "fieldName": "size"
2966
+ "attribute": "size",
2967
+ "reflects": true
2960
2968
  },
2961
2969
  {
2962
- "name": "soft-disabled",
2970
+ "kind": "field",
2971
+ "name": "softDisabled",
2963
2972
  "type": {
2964
2973
  "text": "boolean | undefined"
2965
2974
  },
2966
2975
  "description": "Indicates whether the buttonlink is soft disabled.\nWhen set to `true`, the buttonlink 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 buttonlink behaves like a disabled buttonlink, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
2967
2976
  "default": "undefined",
2968
- "fieldName": "softDisabled"
2977
+ "attribute": "soft-disabled",
2978
+ "reflects": true
2969
2979
  },
2970
2980
  {
2971
- "name": "prefix-icon",
2981
+ "kind": "method",
2982
+ "name": "setSoftDisabled",
2983
+ "privacy": "private",
2984
+ "parameters": [
2985
+ {
2986
+ "name": "element",
2987
+ "type": {
2988
+ "text": "HTMLElement"
2989
+ },
2990
+ "description": "The buttonlink element."
2991
+ },
2992
+ {
2993
+ "name": "softDisabled",
2994
+ "optional": true,
2995
+ "type": {
2996
+ "text": "boolean"
2997
+ },
2998
+ "description": "The soft-disabled state."
2999
+ }
3000
+ ],
3001
+ "description": "Sets the soft-disabled attribute for the buttonlink.\nWhen soft-disabled, the buttonlink looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute."
3002
+ },
3003
+ {
3004
+ "kind": "field",
3005
+ "name": "prefixIcon",
2972
3006
  "type": {
2973
3007
  "text": "IconNames | undefined"
2974
3008
  },
2975
3009
  "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
2976
- "fieldName": "prefixIcon",
3010
+ "attribute": "prefix-icon",
3011
+ "reflects": true,
2977
3012
  "inheritedFrom": {
2978
3013
  "name": "ButtonComponentMixin",
2979
- "module": "src/utils/mixins/ButtonComponentMixin.ts"
3014
+ "module": "utils/mixins/ButtonComponentMixin.js"
2980
3015
  }
2981
3016
  },
2982
3017
  {
2983
- "name": "postfix-icon",
3018
+ "kind": "field",
3019
+ "name": "postfixIcon",
2984
3020
  "type": {
2985
3021
  "text": "IconNames | undefined"
2986
3022
  },
2987
3023
  "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
2988
- "fieldName": "postfixIcon",
3024
+ "attribute": "postfix-icon",
3025
+ "reflects": true,
2989
3026
  "inheritedFrom": {
2990
3027
  "name": "ButtonComponentMixin",
2991
- "module": "src/utils/mixins/ButtonComponentMixin.ts"
3028
+ "module": "utils/mixins/ButtonComponentMixin.js"
2992
3029
  }
2993
3030
  },
2994
3031
  {
3032
+ "kind": "field",
2995
3033
  "name": "variant",
2996
3034
  "type": {
2997
3035
  "text": "ButtonVariant"
2998
3036
  },
2999
3037
  "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.",
3000
3038
  "default": "primary",
3001
- "fieldName": "variant",
3039
+ "attribute": "variant",
3002
3040
  "inheritedFrom": {
3003
3041
  "name": "ButtonComponentMixin",
3004
- "module": "src/utils/mixins/ButtonComponentMixin.ts"
3042
+ "module": "utils/mixins/ButtonComponentMixin.js"
3005
3043
  }
3006
3044
  },
3007
3045
  {
3046
+ "kind": "field",
3008
3047
  "name": "color",
3009
3048
  "type": {
3010
3049
  "text": "ButtonColor"
3011
3050
  },
3012
3051
  "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
3013
3052
  "default": "default",
3014
- "fieldName": "color",
3053
+ "attribute": "color",
3015
3054
  "inheritedFrom": {
3016
3055
  "name": "ButtonComponentMixin",
3017
- "module": "src/utils/mixins/ButtonComponentMixin.ts"
3018
- }
3019
- },
3020
- {
3021
- "name": "disabled",
3022
- "type": {
3023
- "text": "boolean | undefined"
3024
- },
3025
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
3026
- "default": "undefined",
3027
- "fieldName": "disabled",
3028
- "inheritedFrom": {
3029
- "name": "DisabledMixin",
3030
- "module": "src/utils/mixins/DisabledMixin.ts"
3056
+ "module": "utils/mixins/ButtonComponentMixin.js"
3031
3057
  }
3032
3058
  },
3033
3059
  {
3034
- "name": "tabIndex",
3035
- "type": {
3036
- "text": "number"
3037
- },
3060
+ "kind": "method",
3061
+ "name": "setVariant",
3062
+ "parameters": [
3063
+ {
3064
+ "name": "variant",
3065
+ "type": {
3066
+ "text": "ButtonVariant"
3067
+ },
3068
+ "description": "The variant to set."
3069
+ }
3070
+ ],
3071
+ "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.",
3072
+ "inheritedFrom": {
3073
+ "name": "ButtonComponentMixin",
3074
+ "module": "utils/mixins/ButtonComponentMixin.js"
3075
+ }
3076
+ },
3077
+ {
3078
+ "kind": "method",
3079
+ "name": "setColor",
3080
+ "parameters": [
3081
+ {
3082
+ "name": "color",
3083
+ "type": {
3084
+ "text": "ButtonColor"
3085
+ },
3086
+ "description": "The color to set."
3087
+ }
3088
+ ],
3089
+ "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary button.",
3090
+ "inheritedFrom": {
3091
+ "name": "ButtonComponentMixin",
3092
+ "module": "utils/mixins/ButtonComponentMixin.js"
3093
+ }
3094
+ },
3095
+ {
3096
+ "kind": "method",
3097
+ "name": "setSize",
3098
+ "parameters": [
3099
+ {
3100
+ "name": "size",
3101
+ "type": {
3102
+ "text": "PillButtonSize | IconButtonSize"
3103
+ },
3104
+ "description": "The size to set."
3105
+ }
3106
+ ],
3107
+ "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.",
3108
+ "inheritedFrom": {
3109
+ "name": "ButtonComponentMixin",
3110
+ "module": "utils/mixins/ButtonComponentMixin.js"
3111
+ }
3112
+ },
3113
+ {
3114
+ "kind": "method",
3115
+ "name": "inferButtonType",
3116
+ "description": "Infers the type of button based on the presence of slot and/or prefix and postfix icons.",
3117
+ "parameters": [
3118
+ {
3119
+ "description": "default slot of button",
3120
+ "name": "slot"
3121
+ }
3122
+ ],
3123
+ "inheritedFrom": {
3124
+ "name": "ButtonComponentMixin",
3125
+ "module": "utils/mixins/ButtonComponentMixin.js"
3126
+ }
3127
+ },
3128
+ {
3129
+ "kind": "field",
3130
+ "name": "disabled",
3131
+ "type": {
3132
+ "text": "boolean | undefined"
3133
+ },
3134
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
3135
+ "default": "undefined",
3136
+ "attribute": "disabled",
3137
+ "reflects": true,
3138
+ "inheritedFrom": {
3139
+ "name": "DisabledMixin",
3140
+ "module": "utils/mixins/DisabledMixin.js"
3141
+ }
3142
+ },
3143
+ {
3144
+ "kind": "field",
3145
+ "name": "tabIndex",
3146
+ "type": {
3147
+ "text": "number"
3148
+ },
3038
3149
  "default": "0",
3039
3150
  "description": "This property specifies the tab order of the element.",
3040
- "fieldName": "tabIndex",
3151
+ "attribute": "tabIndex",
3152
+ "reflects": true,
3041
3153
  "inheritedFrom": {
3042
3154
  "name": "TabIndexMixin",
3043
- "module": "src/utils/mixins/TabIndexMixin.ts"
3155
+ "module": "utils/mixins/TabIndexMixin.js"
3044
3156
  }
3045
3157
  },
3046
3158
  {
3159
+ "kind": "field",
3047
3160
  "name": "inline",
3048
3161
  "type": {
3049
3162
  "text": "boolean"
3050
3163
  },
3051
3164
  "description": "The link can be inline or standalone.",
3052
3165
  "default": "false",
3053
- "fieldName": "inline",
3166
+ "attribute": "inline",
3167
+ "reflects": true,
3054
3168
  "inheritedFrom": {
3055
3169
  "name": "Linksimple",
3056
- "module": "src/components/linksimple/linksimple.component.ts"
3170
+ "module": "components/linksimple/linksimple.component.js"
3057
3171
  }
3058
3172
  },
3059
3173
  {
3174
+ "kind": "field",
3060
3175
  "name": "inverted",
3061
3176
  "type": {
3062
3177
  "text": "boolean"
3063
3178
  },
3064
3179
  "description": "The link color can be inverted by setting the inverted attribute to true.",
3065
3180
  "default": "false",
3066
- "fieldName": "inverted",
3181
+ "attribute": "inverted",
3182
+ "reflects": true,
3067
3183
  "inheritedFrom": {
3068
3184
  "name": "Linksimple",
3069
- "module": "src/components/linksimple/linksimple.component.ts"
3185
+ "module": "components/linksimple/linksimple.component.js"
3070
3186
  }
3071
3187
  },
3072
3188
  {
3189
+ "kind": "field",
3073
3190
  "name": "href",
3074
3191
  "type": {
3075
3192
  "text": "string"
3076
3193
  },
3077
3194
  "default": "'#'",
3078
3195
  "description": "Href for navigation. The URL that the hyperlink points to",
3079
- "fieldName": "href",
3196
+ "attribute": "href",
3197
+ "reflects": true,
3080
3198
  "inheritedFrom": {
3081
3199
  "name": "Linksimple",
3082
- "module": "src/components/linksimple/linksimple.component.ts"
3200
+ "module": "components/linksimple/linksimple.component.js"
3083
3201
  }
3084
3202
  },
3085
3203
  {
3204
+ "kind": "field",
3086
3205
  "name": "target",
3087
3206
  "type": {
3088
3207
  "text": "string"
3089
3208
  },
3090
3209
  "default": "'_self'",
3091
3210
  "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
3092
- "fieldName": "target",
3211
+ "attribute": "target",
3212
+ "reflects": true,
3093
3213
  "inheritedFrom": {
3094
3214
  "name": "Linksimple",
3095
- "module": "src/components/linksimple/linksimple.component.ts"
3215
+ "module": "components/linksimple/linksimple.component.js"
3096
3216
  }
3097
3217
  },
3098
3218
  {
3219
+ "kind": "field",
3099
3220
  "name": "rel",
3100
3221
  "type": {
3101
3222
  "text": "string | undefined"
3102
3223
  },
3103
3224
  "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
3104
- "fieldName": "rel",
3105
- "inheritedFrom": {
3106
- "name": "Linksimple",
3107
- "module": "src/components/linksimple/linksimple.component.ts"
3108
- }
3109
- }
3110
- ],
3111
- "mixins": [
3112
- {
3113
- "name": "ButtonComponentMixin",
3114
- "module": "/src/utils/mixins/ButtonComponentMixin"
3115
- }
3116
- ],
3117
- "superclass": {
3118
- "name": "Linksimple",
3119
- "module": "/src/components/linksimple/linksimple.component"
3120
- },
3121
- "tagName": "mdc-buttonlink",
3122
- "jsDoc": "/**\n * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\n * features of `mdc-button`. This includes support for variants, sizing, and optional\n * prefix and postfix icons via slots.\n *\n * ### Features:\n * - Behaves like an link while visually resembling a button.\n * - Supports slots for `prefix-icon` and `postfix-icon`.\n * - Customizable size, color, and variant through attributes.\n * - Inherits accessibility and keyboard interaction support from `mdc-linksimple`.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-buttonlink\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n */",
3123
- "customElement": true,
3124
- "cssProperties": [
3125
- {
3126
- "description": "Border radius of the link.",
3127
- "name": "--mdc-link-border-radius",
3128
- "inheritedFrom": {
3129
- "name": "Linksimple",
3130
- "module": "src/components/linksimple/linksimple.component.ts"
3131
- }
3132
- },
3133
- {
3134
- "description": "Color of the link’s child content in the active state.",
3135
- "name": "--mdc-link-color-active",
3136
- "inheritedFrom": {
3137
- "name": "Linksimple",
3138
- "module": "src/components/linksimple/linksimple.component.ts"
3139
- }
3140
- },
3141
- {
3142
- "description": "Color of the link’s child content in the disabled state.",
3143
- "name": "--mdc-link-color-disabled",
3225
+ "attribute": "rel",
3226
+ "reflects": true,
3144
3227
  "inheritedFrom": {
3145
3228
  "name": "Linksimple",
3146
- "module": "src/components/linksimple/linksimple.component.ts"
3229
+ "module": "components/linksimple/linksimple.component.js"
3147
3230
  }
3148
3231
  },
3149
3232
  {
3150
- "description": "Color of the link’s child content in the hover state.",
3151
- "name": "--mdc-link-color-hover",
3233
+ "kind": "field",
3234
+ "name": "handleNavigation",
3235
+ "privacy": "private",
3152
3236
  "inheritedFrom": {
3153
3237
  "name": "Linksimple",
3154
- "module": "src/components/linksimple/linksimple.component.ts"
3238
+ "module": "components/linksimple/linksimple.component.js"
3155
3239
  }
3156
3240
  },
3157
3241
  {
3158
- "description": "Color of the link’s child content in the normal state.",
3159
- "name": "--mdc-link-color-normal",
3242
+ "kind": "method",
3243
+ "name": "setDisabled",
3244
+ "privacy": "private",
3245
+ "parameters": [
3246
+ {
3247
+ "name": "disabled",
3248
+ "type": {
3249
+ "text": "boolean"
3250
+ },
3251
+ "description": "Whether the element should be disabled"
3252
+ }
3253
+ ],
3254
+ "description": "Sets or removes `aria-disabled` and updates `tabIndex` to reflect\nthe disabled state. When disabled, the element becomes unfocusable;\nwhen enabled, the previous `tabIndex` is restored.",
3160
3255
  "inheritedFrom": {
3161
3256
  "name": "Linksimple",
3162
- "module": "src/components/linksimple/linksimple.component.ts"
3257
+ "module": "components/linksimple/linksimple.component.js"
3163
3258
  }
3164
- },
3259
+ }
3260
+ ],
3261
+ "events": [
3165
3262
  {
3166
- "description": "Color of the inverted link’s child content in the active state.",
3167
- "name": "--mdc-link-inverted-color-active",
3263
+ "description": "(React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.",
3264
+ "name": "click",
3265
+ "reactName": "onClick",
3168
3266
  "inheritedFrom": {
3169
3267
  "name": "Linksimple",
3170
3268
  "module": "src/components/linksimple/linksimple.component.ts"
3171
3269
  }
3172
3270
  },
3173
3271
  {
3174
- "description": "Color of the inverted link’s child content in the disabled state.",
3175
- "name": "--mdc-link-inverted-color-disabled",
3272
+ "description": "(React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.",
3273
+ "name": "keydown",
3274
+ "reactName": "onKeyDown",
3176
3275
  "inheritedFrom": {
3177
3276
  "name": "Linksimple",
3178
3277
  "module": "src/components/linksimple/linksimple.component.ts"
3179
3278
  }
3180
3279
  },
3181
3280
  {
3182
- "description": "Color of the inverted link’s child content in the hover state.",
3183
- "name": "--mdc-link-inverted-color-hover",
3281
+ "description": "(React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.",
3282
+ "name": "focus",
3283
+ "reactName": "onFocus",
3184
3284
  "inheritedFrom": {
3185
3285
  "name": "Linksimple",
3186
3286
  "module": "src/components/linksimple/linksimple.component.ts"
3187
3287
  }
3188
3288
  },
3189
3289
  {
3190
- "description": "Color of the inverted link’s child content in the normal state.",
3191
- "name": "--mdc-link-inverted-color-normal",
3290
+ "description": "(React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.",
3291
+ "name": "blur",
3292
+ "reactName": "onBlur",
3192
3293
  "inheritedFrom": {
3193
3294
  "name": "Linksimple",
3194
3295
  "module": "src/components/linksimple/linksimple.component.ts"
3195
3296
  }
3196
3297
  }
3197
- ]
3198
- }
3199
- ],
3200
- "exports": [
3201
- {
3202
- "kind": "js",
3203
- "name": "default",
3204
- "declaration": {
3205
- "name": "ButtonLink",
3206
- "module": "components/buttonlink/buttonlink.component.js"
3207
- }
3208
- }
3209
- ]
3210
- },
3211
- {
3212
- "kind": "javascript-module",
3213
- "path": "components/buttonsimple/buttonsimple.component.js",
3214
- "declarations": [
3215
- {
3216
- "kind": "class",
3217
- "description": "`mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\nIt is used as an internal component and is not intended to be used directly by consumers.\nConsumers should use the `mdc-button` component instead.",
3218
- "name": "Buttonsimple",
3219
- "members": [
3298
+ ],
3299
+ "attributes": [
3220
3300
  {
3221
- "kind": "field",
3222
- "name": "active",
3301
+ "name": "size",
3223
3302
  "type": {
3224
- "text": "boolean | undefined"
3303
+ "text": "PillButtonSize | IconButtonSize"
3225
3304
  },
3226
- "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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
3227
- "default": "undefined",
3228
- "attribute": "active",
3229
- "reflects": true
3305
+ "description": "ButtonLink sizing is based on the buttonlink type.\n - **Pill buttonlink**: 40, 32, 28, 24.\n - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.\n - Tertiary icon buttonlink can also be 20.",
3306
+ "default": "32",
3307
+ "fieldName": "size"
3230
3308
  },
3231
3309
  {
3232
- "kind": "field",
3233
- "name": "softDisabled",
3310
+ "name": "soft-disabled",
3234
3311
  "type": {
3235
3312
  "text": "boolean | undefined"
3236
3313
  },
3237
- "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.",
3314
+ "description": "Indicates whether the buttonlink is soft disabled.\nWhen set to `true`, the buttonlink 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 buttonlink behaves like a disabled buttonlink, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
3238
3315
  "default": "undefined",
3239
- "attribute": "soft-disabled",
3240
- "reflects": true
3316
+ "fieldName": "softDisabled"
3241
3317
  },
3242
3318
  {
3243
- "kind": "field",
3244
- "name": "size",
3319
+ "name": "prefix-icon",
3245
3320
  "type": {
3246
- "text": "ButtonSize"
3321
+ "text": "IconNames | undefined"
3247
3322
  },
3248
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
3249
- "default": "32",
3250
- "attribute": "size",
3251
- "reflects": true
3252
- },
3253
- {
3254
- "kind": "field",
3255
- "name": "role",
3256
- "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.",
3257
- "default": "button",
3258
- "attribute": "role",
3259
- "reflects": true
3323
+ "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
3324
+ "fieldName": "prefixIcon",
3325
+ "inheritedFrom": {
3326
+ "name": "ButtonComponentMixin",
3327
+ "module": "src/utils/mixins/ButtonComponentMixin.ts"
3328
+ }
3260
3329
  },
3261
3330
  {
3262
- "kind": "field",
3263
- "name": "ariaStateKey",
3331
+ "name": "postfix-icon",
3264
3332
  "type": {
3265
- "text": "string | undefined"
3333
+ "text": "IconNames | undefined"
3266
3334
  },
3267
- "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
3268
- "default": "'aria-pressed' (when)",
3269
- "attribute": "ariaStateKey",
3270
- "reflects": true
3335
+ "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
3336
+ "fieldName": "postfixIcon",
3337
+ "inheritedFrom": {
3338
+ "name": "ButtonComponentMixin",
3339
+ "module": "src/utils/mixins/ButtonComponentMixin.ts"
3340
+ }
3271
3341
  },
3272
3342
  {
3273
- "kind": "field",
3274
- "name": "type",
3343
+ "name": "variant",
3275
3344
  "type": {
3276
- "text": "ButtonType"
3345
+ "text": "ButtonVariant"
3277
3346
  },
3278
- "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.",
3279
- "default": "button",
3280
- "attribute": "type",
3281
- "reflects": true
3282
- },
3283
- {
3284
- "kind": "method",
3285
- "name": "executeAction",
3286
- "privacy": "protected"
3287
- },
3288
- {
3289
- "kind": "method",
3290
- "name": "setActive",
3291
- "privacy": "protected",
3292
- "parameters": [
3293
- {
3294
- "name": "element",
3295
- "type": {
3296
- "text": "HTMLElement"
3297
- },
3298
- "description": "The button element"
3299
- },
3300
- {
3301
- "name": "active",
3302
- "optional": true,
3303
- "type": {
3304
- "text": "boolean"
3305
- },
3306
- "description": "The active state of the element"
3307
- }
3308
- ],
3309
- "description": "Sets the ariaStateKey attributes based on the active state of the button."
3310
- },
3311
- {
3312
- "kind": "method",
3313
- "name": "setSoftDisabled",
3314
- "privacy": "private",
3315
- "parameters": [
3316
- {
3317
- "name": "element",
3318
- "type": {
3319
- "text": "HTMLElement"
3320
- },
3321
- "description": "The button element."
3322
- },
3323
- {
3324
- "name": "softDisabled",
3325
- "optional": true,
3326
- "type": {
3327
- "text": "boolean"
3328
- },
3329
- "description": "The soft-disabled state."
3330
- }
3331
- ],
3332
- "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."
3333
- },
3334
- {
3335
- "kind": "method",
3336
- "name": "setDisabled",
3337
- "privacy": "private",
3338
- "parameters": [
3339
- {
3340
- "name": "element",
3341
- "type": {
3342
- "text": "HTMLElement"
3343
- },
3344
- "description": "The button element."
3345
- },
3346
- {
3347
- "name": "disabled",
3348
- "type": {
3349
- "text": "boolean"
3350
- },
3351
- "description": "The disabled state."
3352
- }
3353
- ],
3354
- "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."
3355
- },
3356
- {
3357
- "kind": "method",
3358
- "name": "triggerClickEvent",
3359
- "privacy": "private"
3360
- },
3361
- {
3362
- "kind": "method",
3363
- "name": "handleBlur",
3364
- "privacy": "private",
3365
- "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed."
3347
+ "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.",
3348
+ "default": "primary",
3349
+ "fieldName": "variant",
3350
+ "inheritedFrom": {
3351
+ "name": "ButtonComponentMixin",
3352
+ "module": "src/utils/mixins/ButtonComponentMixin.ts"
3353
+ }
3366
3354
  },
3367
3355
  {
3368
- "kind": "method",
3369
- "name": "handleKeyDown",
3370
- "privacy": "private",
3371
- "parameters": [
3372
- {
3373
- "name": "event",
3374
- "type": {
3375
- "text": "KeyboardEvent"
3376
- },
3377
- "description": "The keyboard event."
3378
- }
3379
- ],
3380
- "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.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application."
3356
+ "name": "color",
3357
+ "type": {
3358
+ "text": "ButtonColor"
3359
+ },
3360
+ "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
3361
+ "default": "default",
3362
+ "fieldName": "color",
3363
+ "inheritedFrom": {
3364
+ "name": "ButtonComponentMixin",
3365
+ "module": "src/utils/mixins/ButtonComponentMixin.ts"
3366
+ }
3381
3367
  },
3382
3368
  {
3383
- "kind": "method",
3384
- "name": "handleKeyUp",
3385
- "privacy": "private",
3386
- "parameters": [
3387
- {
3388
- "name": "event",
3389
- "type": {
3390
- "text": "KeyboardEvent"
3391
- },
3392
- "description": "The keyboard event."
3393
- }
3394
- ],
3395
- "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."
3369
+ "name": "disabled",
3370
+ "type": {
3371
+ "text": "boolean | undefined"
3372
+ },
3373
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
3374
+ "default": "undefined",
3375
+ "fieldName": "disabled",
3376
+ "inheritedFrom": {
3377
+ "name": "DisabledMixin",
3378
+ "module": "src/utils/mixins/DisabledMixin.ts"
3379
+ }
3396
3380
  },
3397
3381
  {
3398
- "kind": "field",
3399
3382
  "name": "tabIndex",
3400
3383
  "type": {
3401
3384
  "text": "number"
3402
3385
  },
3403
3386
  "default": "0",
3404
3387
  "description": "This property specifies the tab order of the element.",
3405
- "attribute": "tabIndex",
3406
- "reflects": true,
3388
+ "fieldName": "tabIndex",
3407
3389
  "inheritedFrom": {
3408
3390
  "name": "TabIndexMixin",
3409
- "module": "utils/mixins/TabIndexMixin.js"
3391
+ "module": "src/utils/mixins/TabIndexMixin.ts"
3410
3392
  }
3411
3393
  },
3412
3394
  {
3413
- "kind": "field",
3414
- "name": "disabled",
3395
+ "name": "inline",
3415
3396
  "type": {
3416
- "text": "boolean | undefined"
3397
+ "text": "boolean"
3417
3398
  },
3418
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
3419
- "default": "undefined",
3420
- "attribute": "disabled",
3421
- "reflects": true,
3399
+ "description": "The link can be inline or standalone.",
3400
+ "default": "false",
3401
+ "fieldName": "inline",
3422
3402
  "inheritedFrom": {
3423
- "name": "DisabledMixin",
3424
- "module": "utils/mixins/DisabledMixin.js"
3403
+ "name": "Linksimple",
3404
+ "module": "src/components/linksimple/linksimple.component.ts"
3425
3405
  }
3426
- }
3427
- ],
3428
- "events": [
3429
- {
3430
- "description": "(React: onClick) This event is dispatched when the button is clicked.",
3431
- "name": "click",
3432
- "reactName": "onClick"
3433
3406
  },
3434
3407
  {
3435
- "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
3436
- "name": "keydown",
3437
- "reactName": "onKeyDown"
3438
- },
3439
- {
3440
- "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
3441
- "name": "keyup",
3442
- "reactName": "onKeyUp"
3408
+ "name": "inverted",
3409
+ "type": {
3410
+ "text": "boolean"
3411
+ },
3412
+ "description": "The link color can be inverted by setting the inverted attribute to true.",
3413
+ "default": "false",
3414
+ "fieldName": "inverted",
3415
+ "inheritedFrom": {
3416
+ "name": "Linksimple",
3417
+ "module": "src/components/linksimple/linksimple.component.ts"
3418
+ }
3443
3419
  },
3444
3420
  {
3445
- "description": "(React: onFocus) This event is dispatched when the button receives focus.",
3446
- "name": "focus",
3447
- "reactName": "onFocus"
3448
- }
3449
- ],
3450
- "attributes": [
3451
- {
3452
- "name": "active",
3421
+ "name": "href",
3453
3422
  "type": {
3454
- "text": "boolean | undefined"
3423
+ "text": "string"
3455
3424
  },
3456
- "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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
3457
- "default": "undefined",
3458
- "fieldName": "active"
3425
+ "default": "'#'",
3426
+ "description": "Href for navigation. The URL that the hyperlink points to",
3427
+ "fieldName": "href",
3428
+ "inheritedFrom": {
3429
+ "name": "Linksimple",
3430
+ "module": "src/components/linksimple/linksimple.component.ts"
3431
+ }
3459
3432
  },
3460
3433
  {
3461
- "name": "soft-disabled",
3434
+ "name": "target",
3462
3435
  "type": {
3463
- "text": "boolean | undefined"
3436
+ "text": "string"
3464
3437
  },
3465
- "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.",
3466
- "default": "undefined",
3467
- "fieldName": "softDisabled"
3438
+ "default": "'_self'",
3439
+ "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
3440
+ "fieldName": "target",
3441
+ "inheritedFrom": {
3442
+ "name": "Linksimple",
3443
+ "module": "src/components/linksimple/linksimple.component.ts"
3444
+ }
3468
3445
  },
3469
3446
  {
3470
- "name": "size",
3447
+ "name": "rel",
3471
3448
  "type": {
3472
- "text": "ButtonSize"
3449
+ "text": "string | undefined"
3473
3450
  },
3474
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
3475
- "default": "32",
3476
- "fieldName": "size"
3451
+ "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
3452
+ "fieldName": "rel",
3453
+ "inheritedFrom": {
3454
+ "name": "Linksimple",
3455
+ "module": "src/components/linksimple/linksimple.component.ts"
3456
+ }
3457
+ }
3458
+ ],
3459
+ "mixins": [
3460
+ {
3461
+ "name": "ButtonComponentMixin",
3462
+ "module": "/src/utils/mixins/ButtonComponentMixin"
3463
+ }
3464
+ ],
3465
+ "superclass": {
3466
+ "name": "Linksimple",
3467
+ "module": "/src/components/linksimple/linksimple.component"
3468
+ },
3469
+ "tagName": "mdc-buttonlink",
3470
+ "jsDoc": "/**\n * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\n * features of `mdc-button`. This includes support for variants, sizing, and optional\n * prefix and postfix icons via slots.\n *\n * ### Features:\n * - Behaves like an link while visually resembling a button.\n * - Supports slots for `prefix-icon` and `postfix-icon`.\n * - Customizable size, color, and variant through attributes.\n * - Inherits accessibility and keyboard interaction support from `mdc-linksimple`.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-buttonlink\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n */",
3471
+ "customElement": true,
3472
+ "cssProperties": [
3473
+ {
3474
+ "description": "Border radius of the link.",
3475
+ "name": "--mdc-link-border-radius",
3476
+ "inheritedFrom": {
3477
+ "name": "Linksimple",
3478
+ "module": "src/components/linksimple/linksimple.component.ts"
3479
+ }
3480
+ },
3481
+ {
3482
+ "description": "Color of the link’s child content in the active state.",
3483
+ "name": "--mdc-link-color-active",
3484
+ "inheritedFrom": {
3485
+ "name": "Linksimple",
3486
+ "module": "src/components/linksimple/linksimple.component.ts"
3487
+ }
3488
+ },
3489
+ {
3490
+ "description": "Color of the link’s child content in the disabled state.",
3491
+ "name": "--mdc-link-color-disabled",
3492
+ "inheritedFrom": {
3493
+ "name": "Linksimple",
3494
+ "module": "src/components/linksimple/linksimple.component.ts"
3495
+ }
3477
3496
  },
3478
3497
  {
3479
- "name": "role",
3480
- "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.",
3481
- "default": "button",
3482
- "fieldName": "role"
3498
+ "description": "Color of the link’s child content in the hover state.",
3499
+ "name": "--mdc-link-color-hover",
3500
+ "inheritedFrom": {
3501
+ "name": "Linksimple",
3502
+ "module": "src/components/linksimple/linksimple.component.ts"
3503
+ }
3483
3504
  },
3484
3505
  {
3485
- "name": "ariaStateKey",
3486
- "type": {
3487
- "text": "string | undefined"
3488
- },
3489
- "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
3490
- "default": "'aria-pressed' (when)",
3491
- "fieldName": "ariaStateKey"
3506
+ "description": "Color of the link’s child content in the normal state.",
3507
+ "name": "--mdc-link-color-normal",
3508
+ "inheritedFrom": {
3509
+ "name": "Linksimple",
3510
+ "module": "src/components/linksimple/linksimple.component.ts"
3511
+ }
3492
3512
  },
3493
3513
  {
3494
- "name": "type",
3495
- "type": {
3496
- "text": "ButtonType"
3497
- },
3498
- "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.",
3499
- "default": "button",
3500
- "fieldName": "type"
3514
+ "description": "Color of the inverted link’s child content in the active state.",
3515
+ "name": "--mdc-link-inverted-color-active",
3516
+ "inheritedFrom": {
3517
+ "name": "Linksimple",
3518
+ "module": "src/components/linksimple/linksimple.component.ts"
3519
+ }
3501
3520
  },
3502
3521
  {
3503
- "name": "tabIndex",
3504
- "type": {
3505
- "text": "number"
3506
- },
3507
- "default": "0",
3508
- "description": "This property specifies the tab order of the element.",
3509
- "fieldName": "tabIndex",
3522
+ "description": "Color of the inverted link’s child content in the disabled state.",
3523
+ "name": "--mdc-link-inverted-color-disabled",
3510
3524
  "inheritedFrom": {
3511
- "name": "TabIndexMixin",
3512
- "module": "src/utils/mixins/TabIndexMixin.ts"
3525
+ "name": "Linksimple",
3526
+ "module": "src/components/linksimple/linksimple.component.ts"
3513
3527
  }
3514
3528
  },
3515
3529
  {
3516
- "name": "disabled",
3517
- "type": {
3518
- "text": "boolean | undefined"
3519
- },
3520
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
3521
- "default": "undefined",
3522
- "fieldName": "disabled",
3530
+ "description": "Color of the inverted link’s child content in the hover state.",
3531
+ "name": "--mdc-link-inverted-color-hover",
3523
3532
  "inheritedFrom": {
3524
- "name": "DisabledMixin",
3525
- "module": "src/utils/mixins/DisabledMixin.ts"
3533
+ "name": "Linksimple",
3534
+ "module": "src/components/linksimple/linksimple.component.ts"
3526
3535
  }
3527
- }
3528
- ],
3529
- "mixins": [
3530
- {
3531
- "name": "TabIndexMixin",
3532
- "module": "/src/utils/mixins/TabIndexMixin"
3533
3536
  },
3534
3537
  {
3535
- "name": "DisabledMixin",
3536
- "module": "/src/utils/mixins/DisabledMixin"
3538
+ "description": "Color of the inverted link’s child content in the normal state.",
3539
+ "name": "--mdc-link-inverted-color-normal",
3540
+ "inheritedFrom": {
3541
+ "name": "Linksimple",
3542
+ "module": "src/components/linksimple/linksimple.component.ts"
3543
+ }
3537
3544
  }
3538
- ],
3539
- "superclass": {
3540
- "name": "Component",
3541
- "module": "/src/models"
3542
- },
3543
- "tagName": "mdc-buttonsimple",
3544
- "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 */",
3545
- "customElement": true
3545
+ ]
3546
3546
  }
3547
3547
  ],
3548
3548
  "exports": [
@@ -3550,8 +3550,8 @@
3550
3550
  "kind": "js",
3551
3551
  "name": "default",
3552
3552
  "declaration": {
3553
- "name": "Buttonsimple",
3554
- "module": "components/buttonsimple/buttonsimple.component.js"
3553
+ "name": "ButtonLink",
3554
+ "module": "components/buttonlink/buttonlink.component.js"
3555
3555
  }
3556
3556
  }
3557
3557
  ]
@@ -12257,13 +12257,6 @@
12257
12257
  }
12258
12258
  ],
12259
12259
  "members": [
12260
- {
12261
- "kind": "field",
12262
- "name": "listItems",
12263
- "type": {
12264
- "text": "Array<HTMLElement>"
12265
- }
12266
- },
12267
12260
  {
12268
12261
  "kind": "field",
12269
12262
  "name": "headerText",
@@ -19830,239 +19823,106 @@
19830
19823
  "name": "data-aria-label",
19831
19824
  "type": {
19832
19825
  "text": "string | null"
19833
- },
19834
- "default": "null",
19835
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
19836
- "fieldName": "dataAriaLabel",
19837
- "inheritedFrom": {
19838
- "name": "DataAriaLabelMixin",
19839
- "module": "src/utils/mixins/DataAriaLabelMixin.ts"
19840
- }
19841
- },
19842
- {
19843
- "name": "disabled",
19844
- "type": {
19845
- "text": "boolean | undefined"
19846
- },
19847
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
19848
- "default": "undefined",
19849
- "fieldName": "disabled",
19850
- "inheritedFrom": {
19851
- "name": "FormfieldWrapper",
19852
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
19853
- }
19854
- },
19855
- {
19856
- "name": "label",
19857
- "type": {
19858
- "text": "string | undefined"
19859
- },
19860
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
19861
- "fieldName": "label",
19862
- "inheritedFrom": {
19863
- "name": "FormfieldWrapper",
19864
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
19865
- }
19866
- },
19867
- {
19868
- "name": "required-label",
19869
- "type": {
19870
- "text": "string | undefined"
19871
- },
19872
- "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
19873
- "fieldName": "requiredLabel",
19874
- "inheritedFrom": {
19875
- "name": "FormfieldWrapper",
19876
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
19877
- }
19878
- },
19879
- {
19880
- "name": "id",
19881
- "type": {
19882
- "text": "string"
19883
- },
19884
- "default": "''",
19885
- "description": "The unique id of the input field. It is used to link the input field with the label.",
19886
- "fieldName": "id",
19887
- "inheritedFrom": {
19888
- "name": "FormfieldWrapper",
19889
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
19890
- }
19891
- },
19892
- {
19893
- "name": "help-text-type",
19894
- "type": {
19895
- "text": "ValidationType"
19896
- },
19897
- "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
19898
- "fieldName": "helpTextType",
19899
- "inheritedFrom": {
19900
- "name": "FormfieldWrapper",
19901
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
19902
- }
19903
- },
19904
- {
19905
- "name": "help-text",
19906
- "type": {
19907
- "text": "string | undefined"
19908
- },
19909
- "description": "The help text that is displayed below the input field.",
19910
- "fieldName": "helpText",
19911
- "inheritedFrom": {
19912
- "name": "FormfieldWrapper",
19913
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
19914
- }
19915
- }
19916
- ],
19917
- "mixins": [
19918
- {
19919
- "name": "FormInternalsMixin",
19920
- "module": "/src/utils/mixins/FormInternalsMixin"
19921
- },
19922
- {
19923
- "name": "DataAriaLabelMixin",
19924
- "module": "/src/utils/mixins/DataAriaLabelMixin"
19925
- }
19926
- ],
19927
- "superclass": {
19928
- "name": "FormfieldWrapper",
19929
- "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
19930
- },
19931
- "tagName": "mdc-select",
19932
- "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases,\n * including long text truncation with tooltip support.\n *\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n */",
19933
- "customElement": true
19934
- }
19935
- ],
19936
- "exports": [
19937
- {
19938
- "kind": "js",
19939
- "name": "default",
19940
- "declaration": {
19941
- "name": "Select",
19942
- "module": "components/select/select.component.js"
19943
- }
19944
- }
19945
- ]
19946
- },
19947
- {
19948
- "kind": "javascript-module",
19949
- "path": "components/spinner/spinner.component.js",
19950
- "declarations": [
19951
- {
19952
- "kind": "class",
19953
- "description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
19954
- "name": "Spinner",
19955
- "cssProperties": [
19956
- {
19957
- "description": "Allows customization of the default spinner color.",
19958
- "name": "--mdc-spinner-default-color"
19959
- },
19960
- {
19961
- "description": "Allows customization of the inverted spinner color.",
19962
- "name": "--mdc-spinner-inverted-color"
19963
- },
19964
- {
19965
- "description": "Allows customization of the spinner Button variant color.",
19966
- "name": "--mdc-spinner-button-variant-color"
19967
- },
19968
- {
19969
- "description": "Allows customization of the spinner size.",
19970
- "name": "--mdc-spinner-size"
19971
- }
19972
- ],
19973
- "cssParts": [
19974
- {
19975
- "description": "The svg which contains the circle spinner.",
19976
- "name": "container"
19977
- },
19978
- {
19979
- "description": "The circle of the spinner.",
19980
- "name": "circle"
19981
- }
19982
- ],
19983
- "members": [
19984
- {
19985
- "kind": "field",
19986
- "name": "inverted",
19987
- "description": "The spinner color can be inverted by setting the inverted attribute to true.",
19988
- "default": "false",
19989
- "attribute": "inverted",
19990
- "reflects": true
19826
+ },
19827
+ "default": "null",
19828
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
19829
+ "fieldName": "dataAriaLabel",
19830
+ "inheritedFrom": {
19831
+ "name": "DataAriaLabelMixin",
19832
+ "module": "src/utils/mixins/DataAriaLabelMixin.ts"
19833
+ }
19991
19834
  },
19992
19835
  {
19993
- "kind": "field",
19994
- "name": "size",
19836
+ "name": "disabled",
19995
19837
  "type": {
19996
- "text": "SpinnerSize | undefined"
19838
+ "text": "boolean | undefined"
19997
19839
  },
19998
- "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
19999
- "default": "midsize",
20000
- "attribute": "size",
20001
- "reflects": true
19840
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
19841
+ "default": "undefined",
19842
+ "fieldName": "disabled",
19843
+ "inheritedFrom": {
19844
+ "name": "FormfieldWrapper",
19845
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
19846
+ }
20002
19847
  },
20003
19848
  {
20004
- "kind": "field",
20005
- "name": "ariaLabel",
19849
+ "name": "label",
20006
19850
  "type": {
20007
- "text": "string | null"
19851
+ "text": "string | undefined"
20008
19852
  },
20009
- "default": "null",
20010
- "description": "Aria-label attribute to be set for accessibility",
20011
- "attribute": "aria-label"
19853
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
19854
+ "fieldName": "label",
19855
+ "inheritedFrom": {
19856
+ "name": "FormfieldWrapper",
19857
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
19858
+ }
20012
19859
  },
20013
19860
  {
20014
- "kind": "field",
20015
- "name": "variant",
19861
+ "name": "required-label",
20016
19862
  "type": {
20017
- "text": "SpinnerVariant"
19863
+ "text": "string | undefined"
20018
19864
  },
20019
- "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
20020
- "default": "standalone",
20021
- "attribute": "variant",
20022
- "reflects": true
20023
- }
20024
- ],
20025
- "attributes": [
20026
- {
20027
- "name": "inverted",
20028
- "description": "The spinner color can be inverted by setting the inverted attribute to true.",
20029
- "default": "false",
20030
- "fieldName": "inverted"
19865
+ "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
19866
+ "fieldName": "requiredLabel",
19867
+ "inheritedFrom": {
19868
+ "name": "FormfieldWrapper",
19869
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
19870
+ }
20031
19871
  },
20032
19872
  {
20033
- "name": "size",
19873
+ "name": "id",
20034
19874
  "type": {
20035
- "text": "SpinnerSize | undefined"
19875
+ "text": "string"
20036
19876
  },
20037
- "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
20038
- "default": "midsize",
20039
- "fieldName": "size"
19877
+ "default": "''",
19878
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
19879
+ "fieldName": "id",
19880
+ "inheritedFrom": {
19881
+ "name": "FormfieldWrapper",
19882
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
19883
+ }
20040
19884
  },
20041
19885
  {
20042
- "name": "aria-label",
19886
+ "name": "help-text-type",
20043
19887
  "type": {
20044
- "text": "string | null"
19888
+ "text": "ValidationType"
20045
19889
  },
20046
- "default": "null",
20047
- "description": "Aria-label attribute to be set for accessibility",
20048
- "fieldName": "ariaLabel"
19890
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
19891
+ "fieldName": "helpTextType",
19892
+ "inheritedFrom": {
19893
+ "name": "FormfieldWrapper",
19894
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
19895
+ }
20049
19896
  },
20050
19897
  {
20051
- "name": "variant",
19898
+ "name": "help-text",
20052
19899
  "type": {
20053
- "text": "SpinnerVariant"
19900
+ "text": "string | undefined"
20054
19901
  },
20055
- "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
20056
- "default": "standalone",
20057
- "fieldName": "variant"
19902
+ "description": "The help text that is displayed below the input field.",
19903
+ "fieldName": "helpText",
19904
+ "inheritedFrom": {
19905
+ "name": "FormfieldWrapper",
19906
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
19907
+ }
19908
+ }
19909
+ ],
19910
+ "mixins": [
19911
+ {
19912
+ "name": "FormInternalsMixin",
19913
+ "module": "/src/utils/mixins/FormInternalsMixin"
19914
+ },
19915
+ {
19916
+ "name": "DataAriaLabelMixin",
19917
+ "module": "/src/utils/mixins/DataAriaLabelMixin"
20058
19918
  }
20059
19919
  ],
20060
19920
  "superclass": {
20061
- "name": "Component",
20062
- "module": "/src/models"
19921
+ "name": "FormfieldWrapper",
19922
+ "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
20063
19923
  },
20064
- "tagName": "mdc-spinner",
20065
- "jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
19924
+ "tagName": "mdc-select",
19925
+ "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases,\n * including long text truncation with tooltip support.\n *\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n */",
20066
19926
  "customElement": true
20067
19927
  }
20068
19928
  ],
@@ -20071,8 +19931,8 @@
20071
19931
  "kind": "js",
20072
19932
  "name": "default",
20073
19933
  "declaration": {
20074
- "name": "Spinner",
20075
- "module": "components/spinner/spinner.component.js"
19934
+ "name": "Select",
19935
+ "module": "components/select/select.component.js"
20076
19936
  }
20077
19937
  }
20078
19938
  ]
@@ -20221,6 +20081,139 @@
20221
20081
  }
20222
20082
  ]
20223
20083
  },
20084
+ {
20085
+ "kind": "javascript-module",
20086
+ "path": "components/spinner/spinner.component.js",
20087
+ "declarations": [
20088
+ {
20089
+ "kind": "class",
20090
+ "description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
20091
+ "name": "Spinner",
20092
+ "cssProperties": [
20093
+ {
20094
+ "description": "Allows customization of the default spinner color.",
20095
+ "name": "--mdc-spinner-default-color"
20096
+ },
20097
+ {
20098
+ "description": "Allows customization of the inverted spinner color.",
20099
+ "name": "--mdc-spinner-inverted-color"
20100
+ },
20101
+ {
20102
+ "description": "Allows customization of the spinner Button variant color.",
20103
+ "name": "--mdc-spinner-button-variant-color"
20104
+ },
20105
+ {
20106
+ "description": "Allows customization of the spinner size.",
20107
+ "name": "--mdc-spinner-size"
20108
+ }
20109
+ ],
20110
+ "cssParts": [
20111
+ {
20112
+ "description": "The svg which contains the circle spinner.",
20113
+ "name": "container"
20114
+ },
20115
+ {
20116
+ "description": "The circle of the spinner.",
20117
+ "name": "circle"
20118
+ }
20119
+ ],
20120
+ "members": [
20121
+ {
20122
+ "kind": "field",
20123
+ "name": "inverted",
20124
+ "description": "The spinner color can be inverted by setting the inverted attribute to true.",
20125
+ "default": "false",
20126
+ "attribute": "inverted",
20127
+ "reflects": true
20128
+ },
20129
+ {
20130
+ "kind": "field",
20131
+ "name": "size",
20132
+ "type": {
20133
+ "text": "SpinnerSize | undefined"
20134
+ },
20135
+ "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
20136
+ "default": "midsize",
20137
+ "attribute": "size",
20138
+ "reflects": true
20139
+ },
20140
+ {
20141
+ "kind": "field",
20142
+ "name": "ariaLabel",
20143
+ "type": {
20144
+ "text": "string | null"
20145
+ },
20146
+ "default": "null",
20147
+ "description": "Aria-label attribute to be set for accessibility",
20148
+ "attribute": "aria-label"
20149
+ },
20150
+ {
20151
+ "kind": "field",
20152
+ "name": "variant",
20153
+ "type": {
20154
+ "text": "SpinnerVariant"
20155
+ },
20156
+ "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
20157
+ "default": "standalone",
20158
+ "attribute": "variant",
20159
+ "reflects": true
20160
+ }
20161
+ ],
20162
+ "attributes": [
20163
+ {
20164
+ "name": "inverted",
20165
+ "description": "The spinner color can be inverted by setting the inverted attribute to true.",
20166
+ "default": "false",
20167
+ "fieldName": "inverted"
20168
+ },
20169
+ {
20170
+ "name": "size",
20171
+ "type": {
20172
+ "text": "SpinnerSize | undefined"
20173
+ },
20174
+ "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
20175
+ "default": "midsize",
20176
+ "fieldName": "size"
20177
+ },
20178
+ {
20179
+ "name": "aria-label",
20180
+ "type": {
20181
+ "text": "string | null"
20182
+ },
20183
+ "default": "null",
20184
+ "description": "Aria-label attribute to be set for accessibility",
20185
+ "fieldName": "ariaLabel"
20186
+ },
20187
+ {
20188
+ "name": "variant",
20189
+ "type": {
20190
+ "text": "SpinnerVariant"
20191
+ },
20192
+ "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
20193
+ "default": "standalone",
20194
+ "fieldName": "variant"
20195
+ }
20196
+ ],
20197
+ "superclass": {
20198
+ "name": "Component",
20199
+ "module": "/src/models"
20200
+ },
20201
+ "tagName": "mdc-spinner",
20202
+ "jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
20203
+ "customElement": true
20204
+ }
20205
+ ],
20206
+ "exports": [
20207
+ {
20208
+ "kind": "js",
20209
+ "name": "default",
20210
+ "declaration": {
20211
+ "name": "Spinner",
20212
+ "module": "components/spinner/spinner.component.js"
20213
+ }
20214
+ }
20215
+ ]
20216
+ },
20224
20217
  {
20225
20218
  "kind": "javascript-module",
20226
20219
  "path": "components/staticradio/staticradio.component.js",