@momentum-design/components 0.1.7 → 0.1.9

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.
@@ -116,27 +116,51 @@
116
116
  },
117
117
  {
118
118
  "kind": "javascript-module",
119
- "path": "components/badge/badge.component.js",
119
+ "path": "components/icon/icon.component.js",
120
120
  "declarations": [
121
121
  {
122
122
  "kind": "class",
123
- "description": "",
124
- "name": "Badge",
125
- "slots": [
123
+ "description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are two types of icons: decorative and informative.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n the role will be unset.",
124
+ "name": "Icon",
125
+ "cssProperties": [
126
126
  {
127
- "description": "This is a default/unnamed slot",
128
- "name": ""
127
+ "description": "Allows customization of the default fill color.",
128
+ "name": "--mdc-icon-fill-color"
129
129
  }
130
130
  ],
131
131
  "members": [
132
132
  {
133
133
  "kind": "field",
134
- "name": "type",
134
+ "name": "iconData",
135
135
  "type": {
136
- "text": "BadgeType | undefined"
136
+ "text": "HTMLElement | undefined"
137
137
  },
138
- "description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
139
- "attribute": "type",
138
+ "privacy": "private"
139
+ },
140
+ {
141
+ "kind": "field",
142
+ "name": "lengthUnitFromContext",
143
+ "type": {
144
+ "text": "string | undefined"
145
+ },
146
+ "privacy": "private"
147
+ },
148
+ {
149
+ "kind": "field",
150
+ "name": "sizeFromContext",
151
+ "type": {
152
+ "text": "number | undefined"
153
+ },
154
+ "privacy": "private"
155
+ },
156
+ {
157
+ "kind": "field",
158
+ "name": "name",
159
+ "type": {
160
+ "text": "string | undefined"
161
+ },
162
+ "description": "Name of the icon (= filename)",
163
+ "attribute": "name",
140
164
  "reflects": true
141
165
  },
142
166
  {
@@ -145,7 +169,7 @@
145
169
  "type": {
146
170
  "text": "number | undefined"
147
171
  },
148
- "description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
172
+ "description": "Size of the icon (works in combination with length unit)",
149
173
  "attribute": "size"
150
174
  },
151
175
  {
@@ -154,60 +178,74 @@
154
178
  "type": {
155
179
  "text": "string | undefined"
156
180
  },
157
- "description": "Length unit attribute for scale\n\nDefault: `rem`",
181
+ "description": "Length unit attribute for overriding length-unit from `IconProvider`",
158
182
  "attribute": "length-unit"
159
183
  },
160
184
  {
161
185
  "kind": "field",
162
- "name": "iconName",
186
+ "name": "ariaLabel",
163
187
  "type": {
164
- "text": "string | undefined"
188
+ "text": "string | null"
165
189
  },
166
- "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
167
- "attribute": "icon-name"
190
+ "default": "null",
191
+ "description": "Aria-label attribute to be set for accessibility",
192
+ "attribute": "aria-label"
168
193
  },
169
194
  {
170
195
  "kind": "field",
171
- "name": "text",
172
- "type": {
173
- "text": "string | undefined"
174
- },
175
- "description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
176
- "attribute": "text"
196
+ "name": "iconProviderContext",
197
+ "privacy": "private",
198
+ "readonly": true
199
+ },
200
+ {
201
+ "kind": "method",
202
+ "name": "getIconData",
203
+ "privacy": "private",
204
+ "description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
177
205
  },
178
206
  {
179
207
  "kind": "method",
180
208
  "name": "updateSize",
181
- "privacy": "private"
209
+ "privacy": "private",
210
+ "description": "Updates the size by setting the width and height"
182
211
  },
183
212
  {
184
213
  "kind": "method",
185
- "name": "iconTemplate"
214
+ "name": "setRoleOnIcon",
215
+ "privacy": "private"
186
216
  },
187
217
  {
188
218
  "kind": "method",
189
- "name": "textTemplate"
219
+ "name": "setAriaHiddenOnIcon",
220
+ "privacy": "private"
190
221
  },
191
222
  {
192
223
  "kind": "method",
193
- "name": "warningTemplate"
224
+ "name": "setAriaLabelOnIcon",
225
+ "privacy": "private"
226
+ },
227
+ {
228
+ "kind": "field",
229
+ "name": "computedIconSize",
230
+ "privacy": "private",
231
+ "readonly": true
194
232
  }
195
233
  ],
196
234
  "attributes": [
197
235
  {
198
- "name": "type",
236
+ "name": "name",
199
237
  "type": {
200
- "text": "BadgeType | undefined"
238
+ "text": "string | undefined"
201
239
  },
202
- "description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
203
- "fieldName": "type"
240
+ "description": "Name of the icon (= filename)",
241
+ "fieldName": "name"
204
242
  },
205
243
  {
206
244
  "name": "size",
207
245
  "type": {
208
246
  "text": "number | undefined"
209
247
  },
210
- "description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
248
+ "description": "Size of the icon (works in combination with length unit)",
211
249
  "fieldName": "size"
212
250
  },
213
251
  {
@@ -215,33 +253,25 @@
215
253
  "type": {
216
254
  "text": "string | undefined"
217
255
  },
218
- "description": "Length unit attribute for scale\n\nDefault: `rem`",
256
+ "description": "Length unit attribute for overriding length-unit from `IconProvider`",
219
257
  "fieldName": "lengthUnit"
220
258
  },
221
259
  {
222
- "name": "icon-name",
223
- "type": {
224
- "text": "string | undefined"
225
- },
226
- "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
227
- "fieldName": "iconName"
228
- },
229
- {
230
- "name": "text",
260
+ "name": "aria-label",
231
261
  "type": {
232
- "text": "string | undefined"
262
+ "text": "string | null"
233
263
  },
234
- "description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
235
- "fieldName": "text"
264
+ "default": "null",
265
+ "description": "Aria-label attribute to be set for accessibility",
266
+ "fieldName": "ariaLabel"
236
267
  }
237
268
  ],
238
269
  "superclass": {
239
270
  "name": "Component",
240
271
  "module": "/src/models"
241
272
  },
242
- "tagName": "mdc-badge",
243
- "summary": "This is MyElement",
244
- "jsDoc": "/**\n * @slot - This is a default/unnamed slot\n *\n * @summary This is MyElement\n *\n * @tagname mdc-badge\n */",
273
+ "tagName": "mdc-icon",
274
+ "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are two types of icons: decorative and informative.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n * by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n * the role will be unset.\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n */",
245
275
  "customElement": true
246
276
  }
247
277
  ],
@@ -250,53 +280,35 @@
250
280
  "kind": "js",
251
281
  "name": "default",
252
282
  "declaration": {
253
- "name": "Badge",
254
- "module": "components/badge/badge.component.js"
283
+ "name": "Icon",
284
+ "module": "components/icon/icon.component.js"
255
285
  }
256
286
  }
257
287
  ]
258
288
  },
259
289
  {
260
290
  "kind": "javascript-module",
261
- "path": "components/icon/icon.component.js",
291
+ "path": "components/badge/badge.component.js",
262
292
  "declarations": [
263
293
  {
264
294
  "kind": "class",
265
- "description": "Icon component, which has to be mounted inside of a `IconProvider`\ncomponent.\n\nThe `IconProvider` component defines where icons should be consumed from (`url`).\nThis `Icon` component accepts the `name` attribute, which will be\nthe file name of the icon to be loaded from the given `url`.\n\nOnce fetched, the icon will be mounted. If fetching wasn't successful,\nnothing will be shown.\n\nThe `size` attribute allows sizing the icon based on the provided\n`length-unit` attribute (which will either come from the IconProvider or\ncould be overridden per icon). For example:\nif `size = 1` and `length-unit = 'em'`, the size of the icon will be\n`width: 1em; height: 1em`.\n\nFor accessibility the `role` and `aria-label` of the icon can be set.",
266
- "name": "Icon",
267
- "members": [
268
- {
269
- "kind": "field",
270
- "name": "iconData",
271
- "type": {
272
- "text": "HTMLElement | undefined"
273
- },
274
- "privacy": "private"
275
- },
276
- {
277
- "kind": "field",
278
- "name": "lengthUnitFromContext",
279
- "type": {
280
- "text": "string | undefined"
281
- },
282
- "privacy": "private"
283
- },
295
+ "description": "",
296
+ "name": "Badge",
297
+ "slots": [
284
298
  {
285
- "kind": "field",
286
- "name": "sizeFromContext",
287
- "type": {
288
- "text": "number | undefined"
289
- },
290
- "privacy": "private"
291
- },
299
+ "description": "This is a default/unnamed slot",
300
+ "name": ""
301
+ }
302
+ ],
303
+ "members": [
292
304
  {
293
305
  "kind": "field",
294
- "name": "name",
306
+ "name": "type",
295
307
  "type": {
296
- "text": "string | undefined"
308
+ "text": "BadgeType | undefined"
297
309
  },
298
- "description": "Name of the icon (= filename)",
299
- "attribute": "name",
310
+ "description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
311
+ "attribute": "type",
300
312
  "reflects": true
301
313
  },
302
314
  {
@@ -305,7 +317,7 @@
305
317
  "type": {
306
318
  "text": "number | undefined"
307
319
  },
308
- "description": "Size of the icon (works in combination with length unit)",
320
+ "description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
309
321
  "attribute": "size"
310
322
  },
311
323
  {
@@ -314,79 +326,60 @@
314
326
  "type": {
315
327
  "text": "string | undefined"
316
328
  },
317
- "description": "Length unit attribute for overriding length-unit from `IconProvider`",
329
+ "description": "Length unit attribute for scale\n\nDefault: `rem`",
318
330
  "attribute": "length-unit"
319
331
  },
320
332
  {
321
333
  "kind": "field",
322
- "name": "role",
334
+ "name": "iconName",
323
335
  "type": {
324
- "text": "string | null"
336
+ "text": "string | undefined"
325
337
  },
326
- "default": "null",
327
- "description": "Role attribute to be set for accessibility",
328
- "attribute": "role"
338
+ "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
339
+ "attribute": "icon-name"
329
340
  },
330
341
  {
331
342
  "kind": "field",
332
- "name": "ariaLabel",
343
+ "name": "text",
333
344
  "type": {
334
- "text": "string | null"
345
+ "text": "string | undefined"
335
346
  },
336
- "default": "null",
337
- "description": "Aria-label attribute to be set for accessibility",
338
- "attribute": "aria-label"
339
- },
340
- {
341
- "kind": "field",
342
- "name": "iconProviderContext",
343
- "privacy": "private",
344
- "readonly": true
345
- },
346
- {
347
- "kind": "method",
348
- "name": "getIconData",
349
- "privacy": "private",
350
- "description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
347
+ "description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
348
+ "attribute": "text"
351
349
  },
352
350
  {
353
351
  "kind": "method",
354
352
  "name": "updateSize",
355
- "privacy": "private",
356
- "description": "Updates the size by setting the width and height"
353
+ "privacy": "private"
357
354
  },
358
355
  {
359
356
  "kind": "method",
360
- "name": "setRoleOnIcon",
361
- "privacy": "private"
357
+ "name": "iconTemplate"
362
358
  },
363
359
  {
364
360
  "kind": "method",
365
- "name": "setAriaLabelOnIcon",
366
- "privacy": "private"
361
+ "name": "textTemplate"
367
362
  },
368
363
  {
369
- "kind": "field",
370
- "name": "computedIconSize",
371
- "privacy": "private",
372
- "readonly": true
364
+ "kind": "method",
365
+ "name": "warningTemplate"
373
366
  }
374
367
  ],
375
368
  "attributes": [
376
369
  {
377
- "name": "name",
370
+ "name": "type",
378
371
  "type": {
379
- "text": "string | undefined"
372
+ "text": "BadgeType | undefined"
380
373
  },
381
- "description": "Name of the icon (= filename)",
382
- "fieldName": "name"
374
+ "description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
375
+ "fieldName": "type"
383
376
  },
384
377
  {
385
378
  "name": "size",
386
379
  "type": {
387
380
  "text": "number | undefined"
388
381
  },
389
- "description": "Size of the icon (works in combination with length unit)",
382
+ "description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
390
383
  "fieldName": "size"
391
384
  },
392
385
  {
@@ -394,34 +387,33 @@
394
387
  "type": {
395
388
  "text": "string | undefined"
396
389
  },
397
- "description": "Length unit attribute for overriding length-unit from `IconProvider`",
390
+ "description": "Length unit attribute for scale\n\nDefault: `rem`",
398
391
  "fieldName": "lengthUnit"
399
392
  },
400
393
  {
401
- "name": "role",
394
+ "name": "icon-name",
402
395
  "type": {
403
- "text": "string | null"
396
+ "text": "string | undefined"
404
397
  },
405
- "default": "null",
406
- "description": "Role attribute to be set for accessibility",
407
- "fieldName": "role"
398
+ "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
399
+ "fieldName": "iconName"
408
400
  },
409
401
  {
410
- "name": "aria-label",
402
+ "name": "text",
411
403
  "type": {
412
- "text": "string | null"
404
+ "text": "string | undefined"
413
405
  },
414
- "default": "null",
415
- "description": "Aria-label attribute to be set for accessibility",
416
- "fieldName": "ariaLabel"
406
+ "description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
407
+ "fieldName": "text"
417
408
  }
418
409
  ],
419
410
  "superclass": {
420
411
  "name": "Component",
421
412
  "module": "/src/models"
422
413
  },
423
- "tagName": "mdc-icon",
424
- "jsDoc": "/**\n * Icon component, which has to be mounted inside of a `IconProvider`\n * component.\n *\n * The `IconProvider` component defines where icons should be consumed from (`url`).\n * This `Icon` component accepts the `name` attribute, which will be\n * the file name of the icon to be loaded from the given `url`.\n *\n * Once fetched, the icon will be mounted. If fetching wasn't successful,\n * nothing will be shown.\n *\n * The `size` attribute allows sizing the icon based on the provided\n * `length-unit` attribute (which will either come from the IconProvider or\n * could be overridden per icon). For example:\n * if `size = 1` and `length-unit = 'em'`, the size of the icon will be\n * `width: 1em; height: 1em`.\n *\n * For accessibility the `role` and `aria-label` of the icon can be set.\n *\n * @tagname mdc-icon\n */",
414
+ "tagName": "mdc-badge",
415
+ "summary": "This is MyElement",
416
+ "jsDoc": "/**\n * @slot - This is a default/unnamed slot\n *\n * @summary This is MyElement\n *\n * @tagname mdc-badge\n */",
425
417
  "customElement": true
426
418
  }
427
419
  ],
@@ -430,8 +422,8 @@
430
422
  "kind": "js",
431
423
  "name": "default",
432
424
  "declaration": {
433
- "name": "Icon",
434
- "module": "components/icon/icon.component.js"
425
+ "name": "Badge",
426
+ "module": "components/badge/badge.component.js"
435
427
  }
436
428
  }
437
429
  ]
@@ -43,7 +43,7 @@ declare abstract class Provider<C> extends Component {
43
43
  /**
44
44
  * Styles associated with this Provider Component.
45
45
  */
46
- static styles: CSSResult | Array<CSSResult>;
46
+ static styles: Array<CSSResult>;
47
47
  /**
48
48
  * Update the context of this Provider and trigger its consumers to update.
49
49
  *
@@ -52,5 +52,5 @@ class Provider extends component_1.default {
52
52
  /**
53
53
  * Styles associated with this Provider Component.
54
54
  */
55
- Provider.styles = provider_styles_1.default;
55
+ Provider.styles = [provider_styles_1.default];
56
56
  exports.default = Provider;
@@ -3,12 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const lit_1 = require("lit");
4
4
  const styles = (0, lit_1.css) `
5
5
  :host {
6
- border: 0;
7
- display: block;
8
- height: 100%;
9
- margin: 0;
10
- padding: 0;
11
- width: 100%;
6
+ display: contents;
12
7
  }
13
8
  `;
14
9
  exports.default = styles;
@@ -1,24 +1,40 @@
1
1
  import Component from '../../components/icon';
2
2
  /**
3
- * Icon component, which has to be mounted inside of a `IconProvider`
4
- * component.
3
+ * Icon component that dynamically displays SVG icons based on a valid name.
5
4
  *
6
- * The `IconProvider` component defines where icons should be consumed from (`url`).
7
- * This `Icon` component accepts the `name` attribute, which will be
8
- * the file name of the icon to be loaded from the given `url`.
5
+ * This component must be mounted within an `IconProvider` component.
9
6
  *
10
- * Once fetched, the icon will be mounted. If fetching wasn't successful,
11
- * nothing will be shown.
7
+ * The `IconProvider` defines the source URL from which icons are consumed.
8
+ * The `Icon` component accepts a `name` attribute, which corresponds to
9
+ * the file name of the icon to be loaded from the specified URL.
12
10
  *
13
- * The `size` attribute allows sizing the icon based on the provided
14
- * `length-unit` attribute (which will either come from the IconProvider or
15
- * could be overridden per icon). For example:
16
- * if `size = 1` and `length-unit = 'em'`, the size of the icon will be
11
+ * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,
12
+ * no icon will be displayed.
13
+ *
14
+ * The `size` attribute allows for dynamic sizing of the icon based on the provided
15
+ * `length-unit` attribute. This unit can either come from the `IconProvider`
16
+ * or can be overridden for each individual icon. For example:
17
+ * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be
17
18
  * `width: 1em; height: 1em`.
18
19
  *
19
- * For accessibility the `role` and `aria-label` of the icon can be set.
20
+ * Regarding accessibility, there are two types of icons: decorative and informative.
21
+ *
22
+ * ### Decorative Icons
23
+ * - Decorative icons do not convey any essential information to the content of a page.
24
+ * - They should be hidden from screen readers (SR) to prevent confusion for users.
25
+ * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.
26
+ *
27
+ * ### Informative Icons
28
+ * - Informative icons convey important information that is not adequately represented
29
+ * by surrounding text or components.
30
+ * - They provide valuable context and must be announced by assistive technologies.
31
+ * - For informative icons, an `aria-label` is required, and the `role` will be set to "img".
32
+ * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
33
+ * the role will be unset.
20
34
  *
21
35
  * @tagname mdc-icon
36
+ *
37
+ * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
22
38
  */
23
39
  declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
24
40
  export default reactWrapper;
@@ -6,25 +6,41 @@ const react_1 = require("@lit/react");
6
6
  const icon_1 = tslib_1.__importDefault(require("../../components/icon"));
7
7
  const icon_constants_1 = require("../../components/icon/icon.constants");
8
8
  /**
9
- * Icon component, which has to be mounted inside of a `IconProvider`
10
- * component.
9
+ * Icon component that dynamically displays SVG icons based on a valid name.
11
10
  *
12
- * The `IconProvider` component defines where icons should be consumed from (`url`).
13
- * This `Icon` component accepts the `name` attribute, which will be
14
- * the file name of the icon to be loaded from the given `url`.
11
+ * This component must be mounted within an `IconProvider` component.
15
12
  *
16
- * Once fetched, the icon will be mounted. If fetching wasn't successful,
17
- * nothing will be shown.
13
+ * The `IconProvider` defines the source URL from which icons are consumed.
14
+ * The `Icon` component accepts a `name` attribute, which corresponds to
15
+ * the file name of the icon to be loaded from the specified URL.
18
16
  *
19
- * The `size` attribute allows sizing the icon based on the provided
20
- * `length-unit` attribute (which will either come from the IconProvider or
21
- * could be overridden per icon). For example:
22
- * if `size = 1` and `length-unit = 'em'`, the size of the icon will be
17
+ * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,
18
+ * no icon will be displayed.
19
+ *
20
+ * The `size` attribute allows for dynamic sizing of the icon based on the provided
21
+ * `length-unit` attribute. This unit can either come from the `IconProvider`
22
+ * or can be overridden for each individual icon. For example:
23
+ * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be
23
24
  * `width: 1em; height: 1em`.
24
25
  *
25
- * For accessibility the `role` and `aria-label` of the icon can be set.
26
+ * Regarding accessibility, there are two types of icons: decorative and informative.
27
+ *
28
+ * ### Decorative Icons
29
+ * - Decorative icons do not convey any essential information to the content of a page.
30
+ * - They should be hidden from screen readers (SR) to prevent confusion for users.
31
+ * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.
32
+ *
33
+ * ### Informative Icons
34
+ * - Informative icons convey important information that is not adequately represented
35
+ * by surrounding text or components.
36
+ * - They provide valuable context and must be announced by assistive technologies.
37
+ * - For informative icons, an `aria-label` is required, and the `role` will be set to "img".
38
+ * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
39
+ * the role will be unset.
26
40
  *
27
41
  * @tagname mdc-icon
42
+ *
43
+ * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
28
44
  */
29
45
  const reactWrapper = (0, react_1.createComponent)({
30
46
  tagName: icon_constants_1.TAG_NAME,
@@ -1,6 +1,6 @@
1
1
  export { default as Avatar } from './avatar';
2
- export { default as Badge } from './badge';
3
2
  export { default as Icon } from './icon';
3
+ export { default as Badge } from './badge';
4
4
  export { default as IconProvider } from './iconprovider';
5
5
  export { default as Text } from './text';
6
6
  export { default as ThemeProvider } from './themeprovider';
@@ -3,13 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.ThemeProvider = exports.Text = exports.IconProvider = exports.Icon = exports.Badge = exports.Avatar = void 0;
6
+ exports.ThemeProvider = exports.Text = exports.IconProvider = exports.Badge = exports.Icon = exports.Avatar = void 0;
7
7
  var avatar_1 = require("./avatar");
8
8
  Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return __importDefault(avatar_1).default; } });
9
- var badge_1 = require("./badge");
10
- Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return __importDefault(badge_1).default; } });
11
9
  var icon_1 = require("./icon");
12
10
  Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(icon_1).default; } });
11
+ var badge_1 = require("./badge");
12
+ Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return __importDefault(badge_1).default; } });
13
13
  var iconprovider_1 = require("./iconprovider");
14
14
  Object.defineProperty(exports, "IconProvider", { enumerable: true, get: function () { return __importDefault(iconprovider_1).default; } });
15
15
  var text_1 = require("./text");
package/package.json CHANGED
@@ -37,5 +37,5 @@
37
37
  "@momentum-design/icons": "*",
38
38
  "@momentum-design/tokens": "*"
39
39
  },
40
- "version": "0.1.7"
40
+ "version": "0.1.9"
41
41
  }