@momentum-design/components 0.27.1 → 0.27.3

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/spinner/spinner.component.js

@@ -111,7 +111,7 @@ __decorate([
     __metadata("design:type", Object)
 ], Spinner.prototype, "ariaLabel", void 0);
 __decorate([
-    property({ type: String }),
+    property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Spinner.prototype, "variant", void 0);
 export default Spinner;

package/dist/custom-elements.json

@@ -3549,7 +3549,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nBundling icons will be up to the consumer of this component, such\nthat only a url has to be passed in from which the icons will be\nfetched.\n\nIf `cacheStrategy` is provided, the IconProvider will cache the icons\nin the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
+          "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nAttribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.\n\nIf `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\nIconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
           "name": "IconProvider",
           "slots": [
             {
@@ -3566,13 +3566,24 @@
               "description": "Context object of the IconProvider, to be consumed by child components",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "iconSet",
+              "type": {
+                "text": "IconSet | undefined"
+              },
+              "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
+              "default": "momentum-icons",
+              "attribute": "icon-set",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "url",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Url of where icons will be fetched from",
+              "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
               "attribute": "url"
             },
             {
@@ -3581,7 +3592,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "File extension of icons",
+              "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
               "default": "svg",
               "attribute": "file-extension",
               "reflects": true
@@ -3612,9 +3623,9 @@
               "kind": "field",
               "name": "cacheStrategy",
               "type": {
-                "text": "'in-memory-cache' | 'web-cache-api' | undefined"
+                "text": "CacheStrategy | undefined"
               },
-              "description": "Icons Cache Strategy to use\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
+              "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
               "default": "undefined",
               "attribute": "cache-strategy"
             },
@@ -3624,7 +3635,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Icons Cache Name to use\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
+              "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
               "default": "undefined",
               "attribute": "cache-name"
             },
@@ -3645,12 +3656,21 @@
             }
           ],
           "attributes": [
+            {
+              "name": "icon-set",
+              "type": {
+                "text": "IconSet | undefined"
+              },
+              "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
+              "default": "momentum-icons",
+              "fieldName": "iconSet"
+            },
             {
               "name": "url",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Url of where icons will be fetched from",
+              "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
               "fieldName": "url"
             },
             {
@@ -3658,7 +3678,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "File extension of icons",
+              "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
               "default": "svg",
               "fieldName": "fileExtension"
             },
@@ -3683,9 +3703,9 @@
             {
               "name": "cache-strategy",
               "type": {
-                "text": "'in-memory-cache' | 'web-cache-api' | undefined"
+                "text": "CacheStrategy | undefined"
               },
-              "description": "Icons Cache Strategy to use\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
+              "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
               "default": "undefined",
               "fieldName": "cacheStrategy"
             },
@@ -3694,7 +3714,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Icons Cache Name to use\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
+              "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
               "default": "undefined",
               "fieldName": "cacheName"
             }
@@ -3704,7 +3724,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-iconprovider",
-          "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Bundling icons will be up to the consumer of this component, such\n * that only a url has to be passed in from which the icons will be\n * fetched.\n *\n * If `cacheStrategy` is provided, the IconProvider will cache the icons\n * in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
+          "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\n * If `momentum-icons` is selected, the icons will be fetched from the\n * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-designs` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-icons` is selected, the icons will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the icons will be fetched and\n * the consumer needs to make sure to bundle the icons in the application.\n *\n * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\n * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
           "customElement": true
         }
       ],
@@ -5823,7 +5843,8 @@
               },
               "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
               "default": "standalone",
-              "attribute": "variant"
+              "attribute": "variant",
+              "reflects": true
             }
           ],
           "attributes": [

package/dist/index.d.ts

@@ -21,6 +21,7 @@ import FormfieldGroup from './components/formfieldgroup';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import Spinner from './components/spinner';
 import type { TextType } from './components/text/text.types';
+import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.types';
 export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, VirtualizedList, Tab, FormfieldGroup, Spinner, };
-export type { TextType, };
+export type { TextType, SpinnerSize, SpinnerVariant, };
 export { inMemoryCache, webAPIIconsCache };

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

@@ -3,12 +3,18 @@ import Component from '../../components/iconprovider';
  * 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:

package/dist/react/iconprovider/index.js

@@ -6,12 +6,18 @@ import { TAG_NAME } from '../../components/iconprovider/iconprovider.constants';
  * 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:

package/package.json

@@ -37,5 +37,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.27.1"
+  "version": "0.27.3"
 }