@momentum-design/components 0.120.4 → 0.120.5

package/dist/custom-elements.json

@@ -17441,254 +17441,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/icon/icon.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "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 three types of icons: decorative, informative and informative standalone.\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\" automatically.\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### Informative Standalone Icons\n- If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\nhave a Tooltip that describes what it means.\n- For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\nand the `role` will be set to \"img\" automatically.\n- **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**",
-          "name": "Icon",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default fill color.",
-              "name": "--mdc-icon-fill-color"
-            },
-            {
-              "description": "Allows customization of the icon size.",
-              "name": "--mdc-icon-size"
-            },
-            {
-              "description": "Allows customization of the icon border radius.",
-              "name": "--mdc-icon-border-radius"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The svg inside the icon element.",
-              "name": "icon"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "iconData",
-              "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "lengthUnitFromContext",
-              "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "sizeFromContext",
-              "type": {
-                "text": "number | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename)",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Size of the icon (works in combination with length unit)",
-              "attribute": "size"
-            },
-            {
-              "kind": "field",
-              "name": "lengthUnit",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
-              "attribute": "length-unit"
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabelledBy",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "attribute": "aria-labelledby"
-            },
-            {
-              "kind": "field",
-              "name": "iconProviderContext",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "abortController",
-              "type": {
-                "text": "AbortController | undefined"
-              },
-              "privacy": "private",
-              "default": "new AbortController()"
-            },
-            {
-              "kind": "method",
-              "name": "prepareIconElement",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "iconData",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The icon string to be parsed"
-                }
-              ],
-              "description": "Parse the icon string to an html element, set the attributes and\nreturn the icon element",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getIconData",
-              "privacy": "private",
-              "description": "Fetches the icon (currently only svg) and sets state and attributes once fetched successfully\n\nThis method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.\nIf the request is aborted after the fetch() call has been fulfilled but before the response body has been read,\nthen attempting to read the response body will reject with an AbortError exception."
-            },
-            {
-              "kind": "method",
-              "name": "handleIconLoadedSuccess",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "iconHtml",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The icon html element which has been fetched from the icon provider."
-                }
-              ],
-              "description": "Sets the iconData state to the fetched icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
-            },
-            {
-              "kind": "method",
-              "name": "handleIconLoadedFailure",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "error",
-                  "type": {
-                    "text": "unknown"
-                  }
-                }
-              ],
-              "description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
-            },
-            {
-              "kind": "method",
-              "name": "updateSize",
-              "privacy": "private",
-              "description": "Updates the size by setting the width and height"
-            },
-            {
-              "kind": "field",
-              "name": "computedIconSize",
-              "privacy": "private",
-              "readonly": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename)",
-              "fieldName": "name"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Size of the icon (works in combination with length unit)",
-              "fieldName": "size"
-            },
-            {
-              "name": "length-unit",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
-              "fieldName": "lengthUnit"
-            },
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
-            },
-            {
-              "name": "aria-labelledby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "fieldName": "ariaLabelledBy"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-icon",
-          "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 three types of icons: decorative, informative and informative standalone.\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\" automatically.\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 * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n *\n * @csspart icon - The svg inside the icon element.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Icon",
-            "module": "components/icon/icon.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/iconprovider/iconprovider.component.js",
@@ -18219,6 +17971,254 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/icon/icon.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "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 three types of icons: decorative, informative and informative standalone.\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\" automatically.\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### Informative Standalone Icons\n- If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\nhave a Tooltip that describes what it means.\n- For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\nand the `role` will be set to \"img\" automatically.\n- **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**",
+          "name": "Icon",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the default fill color.",
+              "name": "--mdc-icon-fill-color"
+            },
+            {
+              "description": "Allows customization of the icon size.",
+              "name": "--mdc-icon-size"
+            },
+            {
+              "description": "Allows customization of the icon border radius.",
+              "name": "--mdc-icon-border-radius"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The svg inside the icon element.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "iconData",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "lengthUnitFromContext",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "sizeFromContext",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename)",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Size of the icon (works in combination with length unit)",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "lengthUnit",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
+              "attribute": "length-unit"
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabelledBy",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "attribute": "aria-labelledby"
+            },
+            {
+              "kind": "field",
+              "name": "iconProviderContext",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "abortController",
+              "type": {
+                "text": "AbortController | undefined"
+              },
+              "privacy": "private",
+              "default": "new AbortController()"
+            },
+            {
+              "kind": "method",
+              "name": "prepareIconElement",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "iconData",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The icon string to be parsed"
+                }
+              ],
+              "description": "Parse the icon string to an html element, set the attributes and\nreturn the icon element",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getIconData",
+              "privacy": "private",
+              "description": "Fetches the icon (currently only svg) and sets state and attributes once fetched successfully\n\nThis method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.\nIf the request is aborted after the fetch() call has been fulfilled but before the response body has been read,\nthen attempting to read the response body will reject with an AbortError exception."
+            },
+            {
+              "kind": "method",
+              "name": "handleIconLoadedSuccess",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "iconHtml",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The icon html element which has been fetched from the icon provider."
+                }
+              ],
+              "description": "Sets the iconData state to the fetched icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
+            },
+            {
+              "kind": "method",
+              "name": "handleIconLoadedFailure",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "error",
+                  "type": {
+                    "text": "unknown"
+                  }
+                }
+              ],
+              "description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
+            },
+            {
+              "kind": "method",
+              "name": "updateSize",
+              "privacy": "private",
+              "description": "Updates the size by setting the width and height"
+            },
+            {
+              "kind": "field",
+              "name": "computedIconSize",
+              "privacy": "private",
+              "readonly": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename)",
+              "fieldName": "name"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Size of the icon (works in combination with length unit)",
+              "fieldName": "size"
+            },
+            {
+              "name": "length-unit",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
+              "fieldName": "lengthUnit"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "aria-labelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "fieldName": "ariaLabelledBy"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-icon",
+          "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 three types of icons: decorative, informative and informative standalone.\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\" automatically.\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 * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n *\n * @csspart icon - The svg inside the icon element.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Icon",
+            "module": "components/icon/icon.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/input/input.component.js",

package/dist/react/index.d.ts

@@ -28,10 +28,10 @@ export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
-export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Illustration } from './illustration';
 export { default as IllustrationProvider } from './illustrationprovider';
+export { default as Icon } from './icon';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
 export { default as Link } from './link';

package/dist/react/index.js

@@ -28,10 +28,10 @@ export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
-export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Illustration } from './illustration';
 export { default as IllustrationProvider } from './illustrationprovider';
+export { default as Icon } from './icon';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
 export { default as Link } from './link';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.120.4",
+  "version": "0.120.5",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"