@momentum-design/components 0.18.2 → 0.18.4

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

@@ -23,6 +23,18 @@ import type { IconVariant, BadgeType } from './badge.types';
  * @dependency mdc-text
  *
  * @tagname mdc-badge
+ *
+ * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.
+ * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.
+ * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.
+ * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.
+ * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.
+ * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.
+ * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.
+ * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.
+ * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.
+ * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
+ * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
  */
 declare class Badge extends Component {
     /**

package/dist/components/badge/badge.component.js

@@ -36,6 +36,18 @@ import styles from './badge.styles';
  * @dependency mdc-text
  *
  * @tagname mdc-badge
+ *
+ * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.
+ * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.
+ * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.
+ * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.
+ * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.
+ * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.
+ * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.
+ * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.
+ * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.
+ * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
+ * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
  */
 class Badge extends Component {
     constructor() {

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,13 +30,22 @@ 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.
+ * @cssproperty --mdc-icon-size - Allows customization of the icon size.
+ * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.
  */
 declare class Icon extends Component {
     private iconData?;
@@ -61,11 +70,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 +80,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 +95,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,13 +44,22 @@ 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.
+ * @cssproperty --mdc-icon-size - Allows customization of the icon size.
+ * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.
  */
 class Icon extends Component {
     constructor() {
@@ -66,17 +75,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 +100,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 +138,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 +154,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/components/presence/presence.component.d.ts

@@ -11,6 +11,22 @@ import type { PresenceType, PresenceSize } from './presence.types';
  * @dependency mdc-icon
  *
  * @tagname mdc-presence
+ *
+ * @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.
+ * @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.
+ * @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.
+ * @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.
+ * @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.
+ * @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.
+ * @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.
+ * @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.
+ * @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.
+ * @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.
+ * @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.
+ * @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.
+ * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.
+ * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.
+ * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.
  */
 declare class Presence extends Component {
     /**

package/dist/components/presence/presence.component.js

@@ -23,6 +23,22 @@ import { getIconValue } from './presence.utils';
  * @dependency mdc-icon
  *
  * @tagname mdc-presence
+ *
+ * @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.
+ * @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.
+ * @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.
+ * @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.
+ * @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.
+ * @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.
+ * @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.
+ * @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.
+ * @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.
+ * @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.
+ * @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.
+ * @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.
+ * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.
+ * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.
+ * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.
  */
 class Presence extends Component {
     constructor() {

package/dist/components/presence/presence.styles.js

@@ -5,33 +5,19 @@ const styles = [
     css `
     :host {
       --mdc-presence-active-background-color: var(--mds-color-theme-indicator-stable);
-      
       --mdc-presence-away-background-color: var(--mds-color-theme-indicator-locked);
-      
       --mdc-presence-away-calling-background-color: var(--mds-color-theme-indicator-locked);
-
       --mdc-presence-busy-background-color: var(--mds-color-theme-indicator-unstable);
-      
       --mdc-presence-dnd-background-color: var(--mds-color-theme-indicator-attention);
-      
       --mdc-presence-meeting-background-color: var(--mds-color-theme-indicator-unstable);
-
       --mdc-presence-on-call-background-color: var(--mds-color-theme-indicator-unstable);
-      
       --mdc-presence-on-device-background-color: var(--mds-color-theme-indicator-locked);
-      
       --mdc-presence-on-mobile-background-color: var(--mds-color-theme-indicator-locked);
-
       --mdc-presence-pause-background-color: var(--mds-color-theme-indicator-locked);
-
       --mdc-presence-pto-background-color: var(--mds-color-theme-indicator-locked);
-      
       --mdc-presence-presenting-background-color: var(--mds-color-theme-indicator-attention);
-
       --mdc-presence-quiet-background-color: var(--mds-color-theme-indicator-locked);
-
       --mdc-presence-scheduled-background-color: var(--mds-color-theme-indicator-unstable);
-
       --mdc-presence-overlay-background-color: var(--mds-color-theme-background-solid-primary-normal);
     }