@momentum-design/components 0.18.1 → 0.18.3

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

@@ -1,6 +1,7 @@
 import { CSSResult, nothing } from 'lit';
 import { Component } from '../../models';
 import type { ValidationType } from './formfieldwrapper.types';
+declare const FormfieldWrapper_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
  * formfieldwrapper is a component that contains the label and helper/validation text
  *  that can be configured in various ways to suit different use cases (most of the input related components).
@@ -11,7 +12,7 @@ import type { ValidationType } from './formfieldwrapper.types';
  * @slot label-info - slot to add the label info icon
  *
  */
-declare class FormfieldWrapper extends Component {
+declare class FormfieldWrapper extends FormfieldWrapper_base {
     /**
      * The label of the input field. It is linked to the input field using the `for` attribute.
      */
@@ -57,7 +58,6 @@ declare class FormfieldWrapper extends Component {
      * @returns void
      */
     protected renderHelperText(): import("lit-html").TemplateResult<1>;
-    render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }
 export default FormfieldWrapper;

package/dist/components/formfieldwrapper/formfieldwrapper.component.js

@@ -14,6 +14,7 @@ import styles from './formfieldwrapper.styles';
 import { Component } from '../../models';
 import { DEFAULTS, MDC_TEXT_OPTIONS } from './formfieldwrapper.constants';
 import { getHelperIcon } from './formfieldwrapper.utils';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 /**
  * formfieldwrapper is a component that contains the label and helper/validation text
  *  that can be configured in various ways to suit different use cases (most of the input related components).
@@ -24,7 +25,7 @@ import { getHelperIcon } from './formfieldwrapper.utils';
  * @slot label-info - slot to add the label info icon
  *
  */
-class FormfieldWrapper extends Component {
+class FormfieldWrapper extends DisabledMixin(Component) {
     constructor() {
         super(...arguments);
         /**
@@ -46,7 +47,7 @@ class FormfieldWrapper extends Component {
         if (!this.label) {
             return nothing;
         }
-        return html `<label for="${this.id}" class="mdc-label" part="mdc-label">${this.label}</label>`;
+        return html `<label for="${this.id}" class="mdc-label" part="label">${this.label}</label>`;
     }
     /**
      * creates the helpertext icon based on the helpTextType for validation.
@@ -58,8 +59,8 @@ class FormfieldWrapper extends Component {
             return nothing;
         }
         const helperIcon = getHelperIcon(this.helpTextType || DEFAULTS.VALIDATION);
-        if (helperIcon) {
-            return html `<mdc-icon part="mdc-helper-icon" size="1" length-unit="rem" name=${helperIcon}></mdc-icon>`;
+        if (helperIcon && !this.disabled) {
+            return html `<mdc-icon part="helper-icon" size="1" length-unit="rem" name=${helperIcon}></mdc-icon>`;
         }
         return nothing;
     }
@@ -74,7 +75,7 @@ class FormfieldWrapper extends Component {
         }
         return html `
       <mdc-text
-        part="mdc-help-text"
+        part="help-text"
         tagname=${MDC_TEXT_OPTIONS.TAGNAME}
         type=${MDC_TEXT_OPTIONS.TYPE}
       >
@@ -87,7 +88,7 @@ class FormfieldWrapper extends Component {
      * @returns void
      */
     renderLabel() {
-        return html `<div class="mdc-label-text" part="mdc-label-text">
+        return html `<div class="mdc-label-text" part="label-text">
       <slot name="label">${this.renderLabelElement()}</slot>
       <slot name="label-info"></slot>
     </div>`;
@@ -102,13 +103,6 @@ class FormfieldWrapper extends Component {
       <slot name="help-text">${this.renderHelpText()}</slot>
     </div>`;
     }
-    render() {
-        return html `
-      ${this.renderLabel()}
-      <slot></slot>
-      ${this.renderHelperText()}
-    `;
-    }
 }
 FormfieldWrapper.styles = [...Component.styles, ...styles];
 __decorate([

package/dist/components/formfieldwrapper/formfieldwrapper.styles.js

@@ -8,9 +8,13 @@ const styles = [
       align-items: flex-start;
       gap: 0.5rem;
     }
-
+    :host([disabled]),
     :host([disabled]) .mdc-label,
-    :host([disabled]) .mdc-help-text {
+    :host([disabled]) .mdc-help-text,
+    :host([disabled][help-text-type='error']) .mdc-help-text,
+    :host([disabled][help-text-type='success']) .mdc-help-text,
+    :host([disabled][help-text-type='warning']) .mdc-help-text,
+    :host([disabled][help-text-type='priority']) .mdc-help-text {
       color: var(--mds-color-theme-text-primary-disabled);
     }
 

package/dist/components/formfieldwrapper/formfieldwrapper.subcomponent.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/formfieldwrapper/formfieldwrapper.subcomponent.js

@@ -0,0 +1,15 @@
+import { html } from 'lit';
+import FormfieldWrapper from './formfieldwrapper.component';
+// Subcomponent to be rendered in E2E Tests, to showcase that the
+// theme can be consumed as a subcomponent
+// (this file is imported in the esbuild config for e2e tests ('/config/esbuild/esbuild-e2e.config.js'))
+class SubComponentFormFieldWrapper extends FormfieldWrapper {
+    render() {
+        return html `
+          ${this.renderLabel()}
+          <slot></slot>
+          ${this.renderHelperText()}
+        `;
+    }
+}
+SubComponentFormFieldWrapper.register('mdc-subcomponent-formfieldwrapper');

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

@@ -2265,6 +2265,21 @@
                   "text": ""
                 }
               }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
             }
           ],
           "attributes": [
@@ -2297,6 +2312,25 @@
               },
               "description": "The help text that is displayed below the input field.",
               "fieldName": "helpText"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
             }
           ],
           "superclass": {
@@ -2325,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": [
             {
@@ -2411,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",
@@ -2441,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",
@@ -2463,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",
@@ -2525,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.1"
+  "version": "0.18.3"
 }