@momentum-design/components 0.27.2 → 0.27.4

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

@@ -10,6 +10,11 @@ declare const AvatarButton_base: import("../../utils/mixins/index.types").Constr
  *
  * @dependency mdc-avatar
  *
+ * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.
+ * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.
+ *
  * @tagname mdc-avatarbutton
  */
 declare class AvatarButton extends AvatarButton_base {

package/dist/components/avatarbutton/avatarbutton.component.js

@@ -24,6 +24,11 @@ import styles from './avatarbutton.styles';
  *
  * @dependency mdc-avatar
  *
+ * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.
+ * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.
+ *
  * @tagname mdc-avatarbutton
  */
 class AvatarButton extends AvatarComponentMixin(IconNameMixin(Buttonsimple)) {

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

@@ -30,6 +30,11 @@ import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from
  *
  * @dependency mdc-icon
  *
+ * @event click - (React: onClick) This event is dispatched when the button is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.
+ * @event focus - (React: onFocus) This event is dispatched when the button receives focus.
+ *
  * @tagname mdc-button
  *
  * @slot - Text label of the button.

package/dist/components/button/button.component.js

@@ -41,6 +41,11 @@ import { getIconNameWithoutStyle, getIconSize } from './button.utils';
  *
  * @dependency mdc-icon
  *
+ * @event click - (React: onClick) This event is dispatched when the button is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.
+ * @event focus - (React: onFocus) This event is dispatched when the button receives focus.
+ *
  * @tagname mdc-button
  *
  * @slot - Text label of the button.
@@ -152,8 +157,8 @@ class Button extends Buttonsimple {
     setSize(size) {
         const isIconType = this.typeInternal === BUTTON_TYPE_INTERNAL.ICON;
         const isValidSize = isIconType
-            ? (Object.values(ICON_BUTTON_SIZES).includes(size)
-                && !(size === ICON_BUTTON_SIZES[20] && this.variant !== BUTTON_VARIANTS.TERTIARY))
+            ? Object.values(ICON_BUTTON_SIZES).includes(size)
+                && !(size === ICON_BUTTON_SIZES[20] && this.variant !== BUTTON_VARIANTS.TERTIARY)
             : Object.values(PILL_BUTTON_SIZES).includes(size);
         this.setAttribute('size', isValidSize ? `${size}` : `${DEFAULTS.SIZE}`);
         this.iconSize = getIconSize(size);
@@ -194,21 +199,25 @@ class Button extends Buttonsimple {
     }
     render() {
         return html `
-      ${this.prefixIcon ? html `
-        <mdc-icon
-          name="${this.prefixIcon}" 
-          part="prefix-icon" 
-          size=${this.iconSize} 
-          length-unit="rem">
-        </mdc-icon>` : ''}
+      ${this.prefixIcon
+            ? html ` <mdc-icon
+            name="${this.prefixIcon}"
+            part="prefix-icon"
+            size=${this.iconSize}
+            length-unit="rem"
+          >
+          </mdc-icon>`
+            : ''}
       <slot @slotchange=${this.inferButtonType}></slot>
-      ${this.postfixIcon ? html `
-        <mdc-icon
-          name="${this.postfixIcon}" 
-          part="postfix-icon" 
-          size=${this.iconSize} 
-          length-unit="rem">
-        </mdc-icon>` : ''}
+      ${this.postfixIcon
+            ? html ` <mdc-icon
+            name="${this.postfixIcon}"
+            part="postfix-icon"
+            size=${this.iconSize}
+            length-unit="rem"
+          >
+          </mdc-icon>`
+            : ''}
     `;
     }
 }

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

@@ -8,6 +8,11 @@ declare const Buttonsimple_base: import("../../utils/mixins/index.types").Constr
  * It is used as an internal component and is not intended to be used directly by consumers.
  * Consumers should use the `mdc-button` component instead.
  *
+ * @event click - (React: onClick) This event is dispatched when the button is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.
+ * @event focus - (React: onFocus) This event is dispatched when the button receives focus.
+ *
  * @tagname mdc-buttonsimple
  */
 declare class Buttonsimple extends Buttonsimple_base {

package/dist/components/buttonsimple/buttonsimple.component.js

@@ -19,6 +19,11 @@ import styles from './buttonsimple.styles';
  * It is used as an internal component and is not intended to be used directly by consumers.
  * Consumers should use the `mdc-button` component instead.
  *
+ * @event click - (React: onClick) This event is dispatched when the button is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.
+ * @event focus - (React: onFocus) This event is dispatched when the button receives focus.
+ *
  * @tagname mdc-buttonsimple
  */
 class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {

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

@@ -13,6 +13,9 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  *
  * @tagname mdc-checkbox
  *
+ * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
+ *
  * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
  * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.
  * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.

package/dist/components/checkbox/checkbox.component.js

@@ -29,6 +29,9 @@ import styles from './checkbox.styles';
  *
  * @tagname mdc-checkbox
  *
+ * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
+ *
  * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
  * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.
  * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.

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

@@ -13,7 +13,7 @@ import styles from './icon.styles';
 import { Component } from '../../models';
 import providerUtils from '../../utils/provider';
 import IconProvider from '../iconprovider/iconprovider.component';
-import { dynamicSVGImport } from './icon.utils';
+import { svgFetch } from './icon.utils';
 import { DEFAULTS } from './icon.constants';
 /**
  * Icon component that dynamically displays SVG icons based on a valid name.
@@ -101,8 +101,8 @@ class Icon extends Component {
      */
     async getIconData() {
         if (this.iconProviderContext.value) {
-            const { fileExtension, url, cacheName, cacheStrategy } = this.iconProviderContext.value;
-            if (url && fileExtension && this.name) {
+            const { fileExtension, url, cacheName, iconSet, cacheStrategy } = this.iconProviderContext.value;
+            if (iconSet === 'custom-icons' && url && fileExtension && this.name) {
                 // function to abort the fetch request and create a new signal
                 // (directly passing the abortcontroller to the fetch request per reference
                 // will not work due to JS call-by-sharing behavior)
@@ -111,25 +111,38 @@ class Icon extends Component {
                     this.abortController = new AbortController();
                     return this.abortController.signal;
                 };
-                try {
-                    // fetch icon data (including caching logic)
-                    const iconData = await dynamicSVGImport({
-                        url,
-                        name: this.name,
-                        fileExtension,
-                        cacheName,
-                        cacheStrategy,
-                        renewSignal,
-                    });
+                // fetch icon data (including caching logic)
+                return svgFetch({
+                    url,
+                    name: this.name,
+                    fileExtension,
+                    cacheName,
+                    cacheStrategy,
+                    renewSignal,
+                })
+                    .then((iconData) => {
                     // parse the fetched icon string to an html element and set the attributes
                     const iconElement = this.prepareIconElement(iconData);
                     this.handleIconLoadedSuccess(iconElement);
-                }
-                catch (error) {
+                })
+                    .catch((error) => {
                     this.handleIconLoadedFailure(error);
-                }
+                });
+            }
+            if (iconSet === 'momentum-icons' && this.name) {
+                // dynamic import of the lit template from the momentum icons package
+                return import(`@momentum-design/icons/dist/ts/${this.name}.ts`)
+                    .then((module) => {
+                    this.handleIconLoadedSuccess(module.default());
+                })
+                    .catch((error) => {
+                    this.handleIconLoadedFailure(error);
+                });
             }
         }
+        const noIconProviderError = new Error('IconProvider not found or not properly set up.');
+        this.handleIconLoadedFailure(noIconProviderError);
+        return Promise.reject(noIconProviderError);
     }
     /**
      * Sets the iconData state to the fetched icon.

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

@@ -28,5 +28,5 @@ interface Args {
  * @returns Response string from the fetch
  * @throws Error if the response is not ok
  */
-declare const dynamicSVGImport: ({ url, name, fileExtension, cacheStrategy, cacheName, renewSignal, }: Args) => Promise<string>;
-export { dynamicSVGImport };
+declare const svgFetch: ({ url, name, fileExtension, cacheStrategy, cacheName, renewSignal, }: Args) => Promise<string>;
+export { svgFetch };

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

@@ -33,7 +33,7 @@ const fetchIcon = async (request) => fetch(request).then((response) => {
  * @returns Response string from the fetch
  * @throws Error if the response is not ok
  */
-const dynamicSVGImport = async ({ url, name, fileExtension, cacheStrategy, cacheName, renewSignal, }) => {
+const svgFetch = async ({ url, name, fileExtension, cacheStrategy, cacheName, renewSignal, }) => {
     // abort the previous fetch request if it is still pending
     // and create a new signal
     const signal = renewSignal();
@@ -76,4 +76,4 @@ const dynamicSVGImport = async ({ url, name, fileExtension, cacheStrategy, cache
         throw new Error(`Error in caching the Icon ${name}, ${error}`);
     }));
 };
-export { dynamicSVGImport };
+export { svgFetch };

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

@@ -1,15 +1,22 @@
 import { Provider } from '../../models';
 import IconProviderContext from './iconprovider.context';
+import type { CacheStrategy, IconSet } from './iconprovider.types';
 /**
  * IconProvider component, which allows to be consumed from sub components
  * (see `providerUtils.consume` for how to consume)
  *
- * Bundling icons will be up to the consumer of this component, such
- * that only a url has to be passed in from which the icons will be
- * fetched.
+ * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.
+ * If `momentum-icons` is selected, the icons will be fetched from the
+ * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).
+ * This requires the consumer to have the `@momentum-designs` package installed and the
+ * build tooling needs to support dynamic imports.
  *
- * If `cacheStrategy` is provided, the IconProvider will cache the icons
- * in the selected cache (either web-api-cache or in-memory-cache),
+ * If `custom-icons` is selected, the icons will be fetched from the provided URL.
+ * This requires the consumer to provide a URL from which the icons will be fetched and
+ * the consumer needs to make sure to bundle the icons in the application.
+ *
+ * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the
+ * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),
  * to avoid fetching the same icon multiple times over the network.
  * This is useful when the same icon is used multiple times in the application.
  * To consider:
@@ -28,36 +35,31 @@ declare class IconProvider extends Provider<IconProviderContext> {
      * Context object of the IconProvider, to be consumed by child components
      */
     static get Context(): {
-        /**
-         * IconProvider component, which allows to be consumed from sub components
-         * (see `providerUtils.consume` for how to consume)
-         *
-         * Bundling icons will be up to the consumer of this component, such
-         * that only a url has to be passed in from which the icons will be
-         * fetched.
-         *
-         * If `cacheStrategy` is provided, the IconProvider will cache the icons
-         * in the selected cache (either web-api-cache or in-memory-cache),
-         * to avoid fetching the same icon multiple times over the network.
-         * This is useful when the same icon is used multiple times in the application.
-         * To consider:
-         * - The `in-memory-cache` is not persisted and will be lost when the
-         * IconProvider is removed from the DOM.
-         * - The `web-api-cache` is persisted, but only works in https environments
-         * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).
-         *
-         * @tagname mdc-iconprovider
-         *
-         * @slot - children
-         */
         __context__: IconProviderContext;
     };
+    /**
+     * Icon set to be used
+     *
+     * If `momentum-icons` is selected, the icons will be fetched from the
+     * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).
+     * This requires the consumer to have the `@momentum-designs` package installed and the
+     * build tooling needs to support dynamic imports.
+     *
+     * If `custom-icons` is selected, the icons will be fetched from the provided URL.
+     * This requires the consumer to provide a URL from which the icons will be fetched and
+     * the consumer needs to make sure to bundle the icons in the application.
+     *
+     * @default momentum-icons
+     */
+    iconSet?: IconSet;
     /**
      * Url of where icons will be fetched from
+     * (if Icon set is `custom-icons`, this will be the base url)
      */
     url?: string;
     /**
      * File extension of icons
+     * (if Icon set is `custom-icons`, this will be the file extension for icons)
      * @default svg
      */
     fileExtension?: string;
@@ -75,6 +77,8 @@ declare class IconProvider extends Provider<IconProviderContext> {
     /**
      * Icons Cache Strategy to use
      *
+     * **Can only be used if Icon set is `custom-icons`**
+     *
      * Choose `in-memory-cache` to cache icons in a JS cache (in-memory cache).
      * Choose `web-cache-api` to cache icons using the Web Cache API.
      *
@@ -83,9 +87,9 @@ declare class IconProvider extends Provider<IconProviderContext> {
      * If not provided or invalid value provided, the icons will not be cached.
      * @default undefined
      */
-    cacheStrategy?: 'in-memory-cache' | 'web-cache-api';
+    cacheStrategy?: CacheStrategy;
     /**
-     * Icons Cache Name to use
+     * Icons Cache Name to use (cache strategy must be provided)
      *
      * If provided, Icons inside the provider will be cached in the
      * cache (determined by `cache-strategy`) with the provided name.

package/dist/components/iconprovider/iconprovider.component.js

@@ -15,12 +15,18 @@ import { ALLOWED_FILE_EXTENSIONS, DEFAULTS, ALLOWED_LENGTH_UNITS } from './iconp
  * IconProvider component, which allows to be consumed from sub components
  * (see `providerUtils.consume` for how to consume)
  *
- * Bundling icons will be up to the consumer of this component, such
- * that only a url has to be passed in from which the icons will be
- * fetched.
+ * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.
+ * If `momentum-icons` is selected, the icons will be fetched from the
+ * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).
+ * This requires the consumer to have the `@momentum-designs` package installed and the
+ * build tooling needs to support dynamic imports.
  *
- * If `cacheStrategy` is provided, the IconProvider will cache the icons
- * in the selected cache (either web-api-cache or in-memory-cache),
+ * If `custom-icons` is selected, the icons will be fetched from the provided URL.
+ * This requires the consumer to provide a URL from which the icons will be fetched and
+ * the consumer needs to make sure to bundle the icons in the application.
+ *
+ * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the
+ * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),
  * to avoid fetching the same icon multiple times over the network.
  * This is useful when the same icon is used multiple times in the application.
  * To consider:
@@ -40,8 +46,24 @@ class IconProvider extends Provider {
             context: IconProviderContext.context,
             initialValue: new IconProviderContext(),
         });
+        /**
+         * Icon set to be used
+         *
+         * If `momentum-icons` is selected, the icons will be fetched from the
+         * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).
+         * This requires the consumer to have the `@momentum-designs` package installed and the
+         * build tooling needs to support dynamic imports.
+         *
+         * If `custom-icons` is selected, the icons will be fetched from the provided URL.
+         * This requires the consumer to provide a URL from which the icons will be fetched and
+         * the consumer needs to make sure to bundle the icons in the application.
+         *
+         * @default momentum-icons
+         */
+        this.iconSet = DEFAULTS.ICON_SET;
         /**
          * File extension of icons
+         * (if Icon set is `custom-icons`, this will be the file extension for icons)
          * @default svg
          */
         this.fileExtension = DEFAULTS.FILE_EXTENSION;
@@ -73,6 +95,7 @@ class IconProvider extends Provider {
             this.fileExtension = DEFAULTS.FILE_EXTENSION;
             this.context.value.fileExtension = DEFAULTS.FILE_EXTENSION;
         }
+        this.context.value.iconSet = this.iconSet;
         this.context.value.url = this.url;
         this.context.value.size = this.size;
         this.context.value.cacheName = this.cacheName;
@@ -88,6 +111,7 @@ class IconProvider extends Provider {
     }
     updateContext() {
         if (this.context.value.fileExtension !== this.fileExtension
+            || this.context.value.iconSet !== this.iconSet
             || this.context.value.url !== this.url
             || this.context.value.lengthUnit !== this.lengthUnit
             || this.context.value.size !== this.size
@@ -98,6 +122,10 @@ class IconProvider extends Provider {
         }
     }
 }
+__decorate([
+    property({ type: String, attribute: 'icon-set', reflect: true }),
+    __metadata("design:type", String)
+], IconProvider.prototype, "iconSet", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)

package/dist/components/iconprovider/iconprovider.constants.d.ts

@@ -7,5 +7,6 @@ declare const DEFAULTS: {
     readonly LENGTH_UNIT: "em";
     readonly SIZE: number;
     readonly SHOULD_CACHE: false;
+    readonly ICON_SET: "momentum-icons";
 };
 export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS, LENGTH_UNIT_SIZE };

package/dist/components/iconprovider/iconprovider.constants.js

@@ -13,5 +13,6 @@ const DEFAULTS = {
     LENGTH_UNIT: 'em',
     SIZE: LENGTH_UNIT_SIZE.em,
     SHOULD_CACHE: false,
+    ICON_SET: 'momentum-icons',
 };
 export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS, LENGTH_UNIT_SIZE };

package/dist/components/iconprovider/iconprovider.context.d.ts

@@ -1,10 +1,12 @@
+import type { IconSet, CacheStrategy } from './iconprovider.types';
 declare class IconProviderContext {
+    iconSet?: IconSet;
     fileExtension?: string;
     url?: string;
     lengthUnit?: string;
     size?: number;
     cacheName?: string;
-    cacheStrategy?: 'in-memory-cache' | 'web-cache-api';
+    cacheStrategy?: CacheStrategy;
     static readonly context: {
         __context__: IconProviderContext;
     };

package/dist/components/iconprovider/iconprovider.types.d.ts

@@ -0,0 +1,3 @@
+type IconSet = 'momentum-icons' | 'custom-icons';
+type CacheStrategy = 'in-memory-cache' | 'web-cache-api';
+export type { IconSet, CacheStrategy };

package/dist/components/iconprovider/iconprovider.types.js

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

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

@@ -17,6 +17,11 @@ declare const Input_base: import("../../utils/mixins/index.types").Constructor<i
  *
  * @tagname mdc-input
  *
+ * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).
+ * @event focus - (React: onFocus) This event is dispatched when the input receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the input loses focus.
+ *
  * @dependency mdc-icon
  * @dependency mdc-text
  * @dependency mdc-button

package/dist/components/input/input.component.js

@@ -31,6 +31,11 @@ import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
  *
  * @tagname mdc-input
  *
+ * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).
+ * @event focus - (React: onFocus) This event is dispatched when the input receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the input loses focus.
+ *
  * @dependency mdc-icon
  * @dependency mdc-text
  * @dependency mdc-button

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

@@ -10,6 +10,9 @@ declare const Radio_base: import("../../utils/mixins/index.types").Constructor<i
  *
  * @tagname mdc-radio
  *
+ * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
+ *
  * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
  * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled
  * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled

package/dist/components/radio/radio.component.js

@@ -25,6 +25,9 @@ import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwra
  *
  * @tagname mdc-radio
  *
+ * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
+ *
  * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
  * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled
  * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled

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

@@ -19,6 +19,11 @@ declare const Tab_base: import("../../utils/mixins/index.types").Constructor<imp
  * @dependency mdc-icon
  * @dependency mdc-text
  *
+ * @event click - (React: onClick) This event is dispatched when the tab is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.
+ * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.
+ *
  * @tagname mdc-tab
  *
  * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.

package/dist/components/tab/tab.component.js

@@ -32,6 +32,11 @@ import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
  * @dependency mdc-icon
  * @dependency mdc-text
  *
+ * @event click - (React: onClick) This event is dispatched when the tab is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.
+ * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.
+ *
  * @tagname mdc-tab
  *
  * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.

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

@@ -16,6 +16,9 @@ declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<
  *
  * @tagname mdc-toggle
  *
+ * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.
+ *
  * @cssproperty --mdc-toggle-width - width of the toggle
  * @cssproperty --mdc-toggle-height - height of the toggle
  * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact

package/dist/components/toggle/toggle.component.js

@@ -31,6 +31,9 @@ import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
  *
  * @tagname mdc-toggle
  *
+ * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.
+ *
  * @cssproperty --mdc-toggle-width - width of the toggle
  * @cssproperty --mdc-toggle-height - height of the toggle
  * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact

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

@@ -13,6 +13,8 @@ import { SetListDataProps, VirtualizerProps } from './virtualizedlist.types';
  *
  * @tagname mdc-virtualizedlist
  *
+ * @event onscroll - (React: onScroll) Event that gets called when user scrolls inside of list.
+ *
  * @slot - Client side List with nested list items.
  */
 declare class VirtualizedList extends Component {

package/dist/components/virtualizedlist/virtualizedlist.component.js

@@ -24,6 +24,8 @@ import { DEFAULTS } from './virtualizedlist.constants';
  *
  * @tagname mdc-virtualizedlist
  *
+ * @event onscroll - (React: onScroll) Event that gets called when user scrolls inside of list.
+ *
  * @slot - Client side List with nested list items.
  */
 class VirtualizedList extends Component {