@momentum-design/components 0.18.2 → 0.18.3

package/dist/components/icon/icon.component.d.ts

@@ -19,7 +19,7 @@ import type { IconNames } from './icon.types';
  * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be
  * `width: 1em; height: 1em`.
  *
- * Regarding accessibility, there are two types of icons: decorative and informative.
+ * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.
  *
  * ### Decorative Icons
  * - Decorative icons do not convey any essential information to the content of a page.
@@ -30,10 +30,17 @@ import type { IconNames } from './icon.types';
  * - Informative icons convey important information that is not adequately represented
  *   by surrounding text or components.
  * - They provide valuable context and must be announced by assistive technologies.
- * - For informative icons, an `aria-label` is required, and the `role` will be set to "img".
+ * - For informative icons, an `aria-label` is required, and the `role` will be set to "img" automatically.
  * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
  *   the role will be unset.
  *
+ * ### Informative Standalone Icons
+ * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must
+ * have a Tooltip that describes what it means.
+ * - For informative standalone icons, an `aria-label` & `tabindex="0"` is required,
+ * and the `role` will be set to "img" automatically.
+ * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**
+ *
  * @tagname mdc-icon
  *
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
@@ -61,11 +68,6 @@ declare class Icon extends Component {
     private readonly iconProviderContext;
     private abortController;
     constructor();
-    /**
-     * Dispatches a 'load' event on the component once the icon has been successfully loaded.
-     * This event bubbles and is cancelable.
-     */
-    private triggerIconLoaded;
     /**
      * Get Icon Data function which will fetch the icon (currently only svg)
      * and sets state and attributes once fetched successfully
@@ -76,8 +78,7 @@ declare class Icon extends Component {
      */
     private getIconData;
     /**
-     * Sets the iconData state to the fetched icon,
-     * and calls functions to set role, aria-label and aria-hidden attributes on the icon.
+     * Sets the iconData state to the fetched icon.
      * Dispatches a 'load' event on the component once the icon has been successfully loaded.
      * @param iconHtml - The icon html element which has been fetched from the icon provider.
      */
@@ -92,9 +93,6 @@ declare class Icon extends Component {
      * Updates the size by setting the width and height
      */
     private updateSize;
-    private setRoleOnIcon;
-    private setAriaHiddenOnIcon;
-    private setAriaLabelOnIcon;
     private get computedIconSize();
     updated(changedProperties: Map<string, any>): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/icon/icon.component.js

@@ -33,7 +33,7 @@ import { DEFAULTS } from './icon.constants';
  * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be
  * `width: 1em; height: 1em`.
  *
- * Regarding accessibility, there are two types of icons: decorative and informative.
+ * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.
  *
  * ### Decorative Icons
  * - Decorative icons do not convey any essential information to the content of a page.
@@ -44,10 +44,17 @@ import { DEFAULTS } from './icon.constants';
  * - Informative icons convey important information that is not adequately represented
  *   by surrounding text or components.
  * - They provide valuable context and must be announced by assistive technologies.
- * - For informative icons, an `aria-label` is required, and the `role` will be set to "img".
+ * - For informative icons, an `aria-label` is required, and the `role` will be set to "img" automatically.
  * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
  *   the role will be unset.
  *
+ * ### Informative Standalone Icons
+ * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must
+ * have a Tooltip that describes what it means.
+ * - For informative standalone icons, an `aria-label` & `tabindex="0"` is required,
+ * and the `role` will be set to "img" automatically.
+ * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**
+ *
  * @tagname mdc-icon
  *
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
@@ -66,17 +73,6 @@ class Icon extends Component {
         this.iconProviderContext = providerUtils.consume({ host: this, context: IconProvider.Context });
         this.abortController = new AbortController(); // Initialize AbortController
     }
-    /**
-     * Dispatches a 'load' event on the component once the icon has been successfully loaded.
-     * This event bubbles and is cancelable.
-     */
-    triggerIconLoaded() {
-        const loadEvent = new Event('load', {
-            bubbles: true,
-            cancelable: true,
-        });
-        this.dispatchEvent(loadEvent);
-    }
     /**
      * Get Icon Data function which will fetch the icon (currently only svg)
      * and sets state and attributes once fetched successfully
@@ -102,19 +98,19 @@ class Icon extends Component {
         }
     }
     /**
-     * Sets the iconData state to the fetched icon,
-     * and calls functions to set role, aria-label and aria-hidden attributes on the icon.
+     * Sets the iconData state to the fetched icon.
      * Dispatches a 'load' event on the component once the icon has been successfully loaded.
      * @param iconHtml - The icon html element which has been fetched from the icon provider.
      */
     handleIconLoadedSuccess(iconHtml) {
         // update iconData state once fetched:
         this.iconData = iconHtml;
-        // when icon is fetched successfully, set the role, aria-label and invoke function to trigger icon load event.
-        this.setRoleOnIcon();
-        this.setAriaLabelOnIcon();
-        this.setAriaHiddenOnIcon();
-        this.triggerIconLoaded();
+        // when icon is fetched successfully, trigger icon load event.
+        const loadEvent = new Event('load', {
+            bubbles: true,
+            cancelable: true,
+        });
+        this.dispatchEvent(loadEvent);
     }
     /**
      * Dispatches an 'error' event on the component when the icon fetching has failed.
@@ -140,24 +136,6 @@ class Icon extends Component {
             this.style.setProperty('--computed-icon-size', value);
         }
     }
-    setRoleOnIcon() {
-        this.role = this.ariaLabel ? 'img' : null;
-    }
-    setAriaHiddenOnIcon() {
-        var _a;
-        // set aria-hidden=true for SVG to avoid screen readers
-        (_a = this.iconData) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
-    }
-    setAriaLabelOnIcon() {
-        var _a, _b;
-        if (this.ariaLabel) {
-            // pass through aria-label attribute to svg if set on mdc-icon
-            (_a = this.iconData) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-label', this.ariaLabel);
-        }
-        else {
-            (_b = this.iconData) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-label');
-        }
-    }
     get computedIconSize() {
         var _a, _b;
         return (_b = (_a = this.size) !== null && _a !== void 0 ? _a : this.sizeFromContext) !== null && _b !== void 0 ? _b : DEFAULTS.SIZE;
@@ -174,8 +152,7 @@ class Icon extends Component {
             });
         }
         if (changedProperties.has('ariaLabel')) {
-            this.setRoleOnIcon();
-            this.setAriaLabelOnIcon();
+            this.role = this.ariaLabel ? 'img' : null;
         }
         if (changedProperties.has('size') || changedProperties.has('lengthUnit')) {
             this.updateSize();

package/dist/components/icon/icon.styles.js

@@ -1,14 +1,16 @@
 import { css } from 'lit';
-import { hostFitContentStyles } from '../../utils/styles';
+import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
 const styles = [
     hostFitContentStyles,
     css `
     :host {
       --mdc-icon-fill-color: currentColor;
-      --mdc-icon-computed-size: var(--computed-icon-size);
+      --mdc-icon-size: var(--computed-icon-size);
+      --mdc-icon-border-radius: 0.25rem;
 
-      height: var(--mdc-icon-computed-size);
-      width: var(--mdc-icon-computed-size);
+      height: var(--mdc-icon-size);
+      width: var(--mdc-icon-size);
+      border-radius: var(--mdc-icon-border-radius);
     }
     :host::part(icon) {
       height: 100%;
@@ -16,5 +18,6 @@ const styles = [
       fill: var(--mdc-icon-fill-color);
     }
   `,
+    ...hostFocusRingStyles(),
 ];
 export default styles;

package/dist/components/icon/icon.utils.js

@@ -20,6 +20,8 @@ const dynamicSVGImport = async (url, name, fileExtension, signal) => {
     const returnValue = new DOMParser().parseFromString(iconResponse, 'text/html').body.children[0];
     returnValue.setAttribute('data-name', name);
     returnValue.setAttribute('part', 'icon');
+    // set aria-hidden=true for SVG to avoid screen readers
+    returnValue.setAttribute('aria-hidden', 'true');
     return returnValue;
 };
 export { dynamicSVGImport };

package/dist/custom-elements.json

@@ -2359,7 +2359,7 @@
       "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 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.",
+          "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": [
             {
@@ -2445,17 +2445,6 @@
               "privacy": "private",
               "default": "new AbortController()"
             },
-            {
-              "kind": "method",
-              "name": "triggerIconLoaded",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Dispatches a 'load' event on the component once the icon has been successfully loaded.\nThis event bubbles and is cancelable."
-            },
             {
               "kind": "method",
               "name": "getIconData",
@@ -2475,7 +2464,7 @@
                   "description": "The icon html element which has been fetched from the icon provider."
                 }
               ],
-              "description": "Sets the iconData state to the fetched icon,\nand calls functions to set role, aria-label and aria-hidden attributes on the icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
+              "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",
@@ -2497,21 +2486,6 @@
               "privacy": "private",
               "description": "Updates the size by setting the width and height"
             },
-            {
-              "kind": "method",
-              "name": "setRoleOnIcon",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "setAriaHiddenOnIcon",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "setAriaLabelOnIcon",
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "computedIconSize",
@@ -2559,7 +2533,7 @@
             "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 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 */",
+          "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 */",
           "customElement": true
         }
       ],

package/dist/react/icon/index.d.ts

@@ -17,7 +17,7 @@ import Component from '../../components/icon';
  * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be
  * `width: 1em; height: 1em`.
  *
- * Regarding accessibility, there are two types of icons: decorative and informative.
+ * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.
  *
  * ### Decorative Icons
  * - Decorative icons do not convey any essential information to the content of a page.
@@ -28,10 +28,17 @@ import Component from '../../components/icon';
  * - Informative icons convey important information that is not adequately represented
  *   by surrounding text or components.
  * - They provide valuable context and must be announced by assistive technologies.
- * - For informative icons, an `aria-label` is required, and the `role` will be set to "img".
+ * - For informative icons, an `aria-label` is required, and the `role` will be set to "img" automatically.
  * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
  *   the role will be unset.
  *
+ * ### Informative Standalone Icons
+ * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must
+ * have a Tooltip that describes what it means.
+ * - For informative standalone icons, an `aria-label` & `tabindex="0"` is required,
+ * and the `role` will be set to "img" automatically.
+ * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**
+ *
  * @tagname mdc-icon
  *
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.

package/dist/react/icon/index.js

@@ -20,7 +20,7 @@ import { TAG_NAME } from '../../components/icon/icon.constants';
  * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be
  * `width: 1em; height: 1em`.
  *
- * Regarding accessibility, there are two types of icons: decorative and informative.
+ * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.
  *
  * ### Decorative Icons
  * - Decorative icons do not convey any essential information to the content of a page.
@@ -31,10 +31,17 @@ import { TAG_NAME } from '../../components/icon/icon.constants';
  * - Informative icons convey important information that is not adequately represented
  *   by surrounding text or components.
  * - They provide valuable context and must be announced by assistive technologies.
- * - For informative icons, an `aria-label` is required, and the `role` will be set to "img".
+ * - For informative icons, an `aria-label` is required, and the `role` will be set to "img" automatically.
  * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
  *   the role will be unset.
  *
+ * ### Informative Standalone Icons
+ * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must
+ * have a Tooltip that describes what it means.
+ * - For informative standalone icons, an `aria-label` & `tabindex="0"` is required,
+ * and the `role` will be set to "img" automatically.
+ * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**
+ *
  * @tagname mdc-icon
  *
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.

package/dist/utils/styles/index.js

@@ -53,6 +53,9 @@ const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
     return [
         baseHostStyleVariables,
         css `
+      :host(:focus-visible) {
+        outline: none;
+      }
       :host([disabled]:focus) {
         box-shadow: none;
       }

package/package.json

@@ -36,5 +36,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.18.2"
+  "version": "0.18.3"
 }